From bde06743b191a1d2704b0092b966f9c788022248 Mon Sep 17 00:00:00 2001
From: Mark Teekman <markteekman@users.noreply.github.com>
Date: Sat, 24 May 2025 11:44:18 +0200
Subject: [PATCH 1/4] chore: update dependencies in package.json for improved
 performance and compatibility

---
 package.json | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 3869948b..fe7a344d 100644
--- a/package.json
+++ b/package.json
@@ -33,28 +33,28 @@
     "url": "https://github.com/incluud/accessible-astro-starter/issues"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^4.2.5",
+    "@astrojs/mdx": "^4.3.0",
     "@astrojs/partytown": "^2.1.4",
-    "@iconify-json/lucide": "^1.2.39",
-    "@typescript-eslint/eslint-plugin": "^8.31.0",
-    "@typescript-eslint/parser": "^8.31.0",
-    "astro": "^5.7.5",
+    "@iconify-json/lucide": "^1.2.44",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
+    "astro": "^5.8.0",
     "astro-compress": "^2.3.8",
     "astro-icon": "^1.1.5",
-    "eslint": "^9.0.0",
+    "eslint": "^9.27.0",
     "eslint-plugin-astro": "^1.3.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-css-order": "^2.1.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "sanitize-html": "^2.16.0",
-    "sass": "^1.87.0",
+    "sanitize-html": "^2.17.0",
+    "sass": "^1.89.0",
     "svgo": "^3.3.2",
-    "tailwindcss": "^4.1.4"
+    "tailwindcss": "^4.1.7"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.1.4",
+    "@tailwindcss/vite": "^4.1.7",
     "accessible-astro-components": "^4.1.1"
   }
 }

From 1363822dc2a19c63b90fcc32d7604fcc54fab693 Mon Sep 17 00:00:00 2001
From: Mark Teekman <markteekman@users.noreply.github.com>
Date: Sat, 24 May 2025 12:05:28 +0200
Subject: [PATCH 2/4] feat: enhance navigation responsiveness and structure

- Added a new breakpoint for navigation at 900px to improve layout adaptability.
- Removed the checkMenuSize function to simplify the component logic and enhance performance.
- Updated styles to ensure mobile menus are displayed by default, with desktop menus activated at the new breakpoint.
- Improved alignment and spacing for menu items to enhance visual consistency and accessibility.

#139
---
 src/assets/scss/base/_breakpoint.scss |  1 +
 src/components/Navigation.astro       | 76 +++++++++++----------------
 src/components/ResponsiveToggle.astro |  2 -
 3 files changed, 33 insertions(+), 46 deletions(-)

diff --git a/src/assets/scss/base/_breakpoint.scss b/src/assets/scss/base/_breakpoint.scss
index ddb1fa92..1fcbe78a 100644
--- a/src/assets/scss/base/_breakpoint.scss
+++ b/src/assets/scss/base/_breakpoint.scss
@@ -6,6 +6,7 @@ $breakpoints: (
   'l': 1024px,
   'xl': 1280px,
   '2xl': 1536px,
+  'nav': 900px,
 ) !default;
 
 @mixin breakpoint($breakpoint) {
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 3008eb7e..6c424d31 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -9,7 +9,7 @@ import Logo from './Logo.astro'
  */
 ---
 
-<div id="main-navigation" class="is-desktop py-8">
+<div id="main-navigation" class="py-8">
   <div class="container">
     <Logo />
     <div class="wrapper">
@@ -57,24 +57,6 @@ import Logo from './Logo.astro'
       })
     }
 
-    const checkMenuSize = (): void => {
-      const mainNavWidth = mainNav.getBoundingClientRect().width
-      const desktopMenuEl = document.querySelector('.desktop-menu') as HTMLElement | null
-      if (!desktopMenuEl) return
-
-      const desktopMenuWidth = desktopMenuEl.getBoundingClientRect().width
-      const logoWidthBuffer = 300
-      const totalMenuWidth = Math.round(desktopMenuWidth) + logoWidthBuffer
-
-      if (totalMenuWidth >= mainNavWidth) {
-        mainNav.classList.remove('is-desktop')
-        mainNav.classList.add('is-mobile')
-      } else if (totalMenuWidth <= mainNavWidth) {
-        mainNav.classList.add('is-desktop')
-        mainNav.classList.remove('is-mobile')
-      }
-    }
-
     const isOutOfViewport = (element: Element): boolean => {
       const elementBounds = element.getBoundingClientRect()
       return elementBounds.right > (window.innerWidth || document.documentElement.clientWidth)
@@ -222,9 +204,6 @@ import Logo from './Logo.astro'
       })
 
     setActiveMenuItem()
-    checkMenuSize()
-
-    window.addEventListener('resize', checkMenuSize)
     window.addEventListener('click', (event: MouseEvent) => {
       const element = event.target as Element
       if (!element.hasAttribute('aria-haspopup') && !element.classList.contains('submenu-item')) {
@@ -236,47 +215,47 @@ import Logo from './Logo.astro'
 
 <style lang="scss" is:global>
   @use '../assets/scss/base/mixins' as *;
+  @use '../assets/scss/base/breakpoint' as *;
 
   #main-navigation {
     > .container {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
+      align-items: center;
     }
 
-    &.is-desktop {
-      .desktop-menu {
-        position: static;
-        visibility: visible;
-      }
+    // Mobile-first: show mobile menu by default
+    .mobile-menu {
+      display: none;
 
-      .mobile-menu {
-        display: none;
+      &.show {
+        display: block;
       }
     }
 
-    &.is-mobile {
-      flex-direction: column;
+    .responsive-toggle {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2xs);
+    }
+
+    .desktop-menu {
+      display: none;
+    }
 
+    // Desktop: switch to desktop menu at nav breakpoint
+    @include breakpoint('nav') {
       .mobile-menu {
         display: none;
-
-        &.show {
-          display: block;
-        }
       }
 
-      .desktop-menu {
-        position: absolute;
-        visibility: hidden;
-        z-index: -99;
-        inset-inline-start: 0;
+      .responsive-toggle {
+        display: none;
       }
 
-      .responsive-toggle {
-        display: flex;
-        align-items: center;
-        gap: var(--space-2xs);
+      .desktop-menu {
+        display: block;
       }
     }
 
@@ -297,6 +276,10 @@ import Logo from './Logo.astro'
         gap: var(--space-m);
         list-style-type: none;
 
+        li {
+          align-content: center;
+        }
+
         a:hover,
         a:focus-visible,
         .is-active,
@@ -419,6 +402,11 @@ import Logo from './Logo.astro'
       border: none;
       padding: 0;
 
+      @include breakpoint('nav') {
+        // Align with the menu items
+        margin-block-start: 7px;
+      }
+
       .icon {
         inline-size: 30px;
         block-size: 30px;
diff --git a/src/components/ResponsiveToggle.astro b/src/components/ResponsiveToggle.astro
index a24c8d12..57fdebf2 100644
--- a/src/components/ResponsiveToggle.astro
+++ b/src/components/ResponsiveToggle.astro
@@ -71,7 +71,6 @@ const { class: className } = Astro.props
 
   .responsive-toggle {
     display: none;
-    margin-block-start: 6px;
     border: none;
     background: transparent;
     padding: 0;
@@ -81,7 +80,6 @@ const { class: className } = Astro.props
     }
 
     svg {
-      margin-block-start: 4px;
       width: 30px;
 
       path {

From 63272be16142f7685565f323f757f4eebdd77b33 Mon Sep 17 00:00:00 2001
From: Mark Teekman <markteekman@users.noreply.github.com>
Date: Sat, 24 May 2025 14:19:35 +0200
Subject: [PATCH 3/4] chore: migrate ESLint configuration to v9+ and remove
 legacy file

---
 .eslintrc.js     |  48 -----------------
 astro.config.mjs |   1 -
 eslint.config.js | 130 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json     |   4 ++
 4 files changed, 134 insertions(+), 49 deletions(-)
 delete mode 100644 .eslintrc.js
 create mode 100644 eslint.config.js

diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index fd0cd826..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,48 +0,0 @@
-module.exports = {
-  env: {
-    node: true,
-    es2022: true,
-    browser: true,
-  },
-  extends: ['eslint:recommended', 'plugin:astro/recommended', 'plugin:astro/jsx-a11y-strict'],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {},
-  overrides: [
-    {
-      files: ['*.js'],
-      rules: {
-        'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
-      },
-    },
-    {
-      files: ['*.astro'],
-      parser: 'astro-eslint-parser',
-      parserOptions: {
-        parser: '@typescript-eslint/parser',
-        extraFileExtensions: ['.astro'],
-      },
-      rules: {
-        'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
-      },
-    },
-    {
-      files: ['*.ts'],
-      parser: '@typescript-eslint/parser',
-      extends: ['plugin:@typescript-eslint/recommended'],
-      rules: {
-        '@typescript-eslint/no-unused-vars': [
-          'error',
-          { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
-        ],
-        '@typescript-eslint/no-non-null-assertion': 'off',
-      },
-    },
-    {
-      files: ['**/*.astro/*.js', '*.astro/*.js'],
-      parser: '@typescript-eslint/parser',
-    },
-  ],
-}
diff --git a/astro.config.mjs b/astro.config.mjs
index 19752e9a..94a58dc9 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -4,7 +4,6 @@ import compress from 'astro-compress'
 import icon from 'astro-icon'
 import tailwindcss from '@tailwindcss/vite'
 import { fileURLToPath } from 'url'
-import path from 'path'
 
 // https://astro.build/config
 export default defineConfig({
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 00000000..871d46a1
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,130 @@
+import globals from 'globals'
+import js from '@eslint/js'
+import astro from 'eslint-plugin-astro'
+import jsxA11y from 'eslint-plugin-jsx-a11y'
+import tseslint from '@typescript-eslint/eslint-plugin'
+import tsParser from '@typescript-eslint/parser'
+import astroParser from 'astro-eslint-parser'
+
+export default [
+  // Ignore patterns
+  {
+    ignores: [
+      'dist/**',
+      'node_modules/**',
+      '.astro/**',
+      '**/*.d.ts', // Ignore generated TypeScript declaration files
+    ],
+  },
+
+  // Base configuration for all files
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+    },
+  },
+
+  // ESLint recommended rules
+  js.configs.recommended,
+
+  // JavaScript files
+  {
+    files: ['**/*.js'],
+    rules: {
+      'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
+    },
+  },
+
+  // Astro files
+  {
+    files: ['**/*.astro'],
+    plugins: {
+      astro,
+    },
+    languageOptions: {
+      parser: astroParser,
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        extraFileExtensions: ['.astro'],
+      },
+    },
+    rules: {
+      ...astro.configs.recommended.rules,
+      ...astro.configs['jsx-a11y-strict'].rules,
+      'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
+    },
+  },
+
+  // TypeScript files
+  {
+    files: ['**/*.ts'],
+    plugins: {
+      '@typescript-eslint': tseslint,
+    },
+    languageOptions: {
+      parser: tsParser,
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules,
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' }],
+      '@typescript-eslint/no-non-null-assertion': 'off',
+    },
+  },
+
+  // JSX files (React components)
+  {
+    files: ['**/*.jsx'],
+    plugins: {
+      'jsx-a11y': jsxA11y,
+    },
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    rules: {
+      ...jsxA11y.configs.strict.rules,
+    },
+  },
+
+  // TypeScript JSX files (React components)
+  {
+    files: ['**/*.tsx'],
+    plugins: {
+      '@typescript-eslint': tseslint,
+      'jsx-a11y': jsxA11y,
+    },
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules,
+      ...jsxA11y.configs.strict.rules,
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' }],
+      '@typescript-eslint/no-non-null-assertion': 'off',
+    },
+  },
+
+  // TypeScript in Astro files
+  {
+    files: ['**/*.astro/*.js', '*.astro/*.js'],
+    plugins: {
+      '@typescript-eslint': tseslint,
+    },
+    languageOptions: {
+      parser: tsParser,
+    },
+  },
+]
diff --git a/package.json b/package.json
index fe7a344d..62652a22 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "version": "4.0.0",
   "author": "Incluud",
   "license": "MIT",
+  "type": "module",
   "homepage": "https://accessible-astro.netlify.app/",
   "scripts": {
     "dev": "astro dev",
@@ -35,6 +36,8 @@
   "devDependencies": {
     "@astrojs/mdx": "^4.3.0",
     "@astrojs/partytown": "^2.1.4",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.27.0",
     "@iconify-json/lucide": "^1.2.44",
     "@typescript-eslint/eslint-plugin": "^8.32.1",
     "@typescript-eslint/parser": "^8.32.1",
@@ -44,6 +47,7 @@
     "eslint": "^9.27.0",
     "eslint-plugin-astro": "^1.3.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
+    "globals": "^16.1.0",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-css-order": "^2.1.2",

From 448ace553fb98240a89d82fb8641963db16b4ba1 Mon Sep 17 00:00:00 2001
From: Mark Teekman <markteekman@users.noreply.github.com>
Date: Sat, 24 May 2025 14:44:13 +0200
Subject: [PATCH 4/4] chore: update ESLint configuration and add
 astro-eslint-parser dependency

---
 eslint.config.js | 11 -----------
 package.json     |  1 +
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index 871d46a1..d52a930c 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -116,15 +116,4 @@ export default [
       '@typescript-eslint/no-non-null-assertion': 'off',
     },
   },
-
-  // TypeScript in Astro files
-  {
-    files: ['**/*.astro/*.js', '*.astro/*.js'],
-    plugins: {
-      '@typescript-eslint': tseslint,
-    },
-    languageOptions: {
-      parser: tsParser,
-    },
-  },
 ]
diff --git a/package.json b/package.json
index 62652a22..ff031524 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@typescript-eslint/parser": "^8.32.1",
     "astro": "^5.8.0",
     "astro-compress": "^2.3.8",
+    "astro-eslint-parser": "^1.2.2",
     "astro-icon": "^1.1.5",
     "eslint": "^9.27.0",
     "eslint-plugin-astro": "^1.3.1",