Add mobile bottom navigation with local Lucide icons and improved accessibility

- Add local Lucide icon system (5 optimized icons)
- Create Apple-style bottom navigation bar (fixed at bottom on mobile)
- Add language toggle (replaces dropdown selector)
- Improve theme support with proper light/dark mode colors
- Add comprehensive ARIA labels and semantic HTML
- Hide main menu on mobile (≤666px) when bottom nav is active
- Add hreflang attributes for language switching

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

assets/css/_colors.css

@@ -97,7 +97,7 @@
   --color-backdrop:               light-dark(var(--color-black-60), var(--color-black-80));
 
   /* Mobil menu colours. */
-  --color-mobile-menu:            light-dark(var(--color-brand-400), var(--color-brand-400));
+  --color-mobile-menu:            light-dark(var(--color-white), var(--color-brand-400));
   --color-mobile-menu-cover:      light-dark(var(--color-black-20), var(--color-black-20));
 
   /* Form colours. */

assets/css/mobilemenu.css

@@ -1,142 +1,94 @@
 /* The mobile navigation stylesheet for this theme. */
 
 @layer mobilemenu {
-  .mobile-nav {
+  .mobile-bottom-nav {
-    position: absolute;
+    position: fixed;
+    bottom: 0;
+    left: 0;
     right: 0;
-    top: 0;
+    width: 100%;
-    width: 100vw;
-    height: 100dvh;
-    overflow: hidden;
-    font-family: var(--ff-headings);
-    z-index: 20;
-    pointer-events: none;
-
-    &[data-navopen] {
-      position: fixed;
-    }
-
-    .language-icon {
-      fill: var(--color-text-bg);
-    }
-  }
-
-  .mobile-nav__cover {
-    position: absolute;
-    width: 100vw;
-    height: 100dvh;
-    background-color: var(--color-mobile-menu-cover);
-    backdrop-filter: blur(3px);
-    opacity: 0;
-
-    [data-navopen] & {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-
-  .mobile-nav__toggle {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    top: var(--gutters);
-    right: var(--gutters);
-    padding: 0 0.3rem;
-    border-color: var(--color-button-text-hover);
-    z-index: 22;
-    pointer-events: auto;
-
-    &:hover,
-    &:focus-visible,
-    &:active {
-      svg {
-        fill: var(--color-button-text-hover);
-      }
-    }
-  }
-
-  .mobile-nav__hamburger {
-    fill: var(--color-button-text);
-    width: 1.6rem;
-    margin-inline-start: 0.1rem;
-
-    .button--outline & {
-      fill: var(--color-button);
-    }
-
-    rect {
-      transform-origin: center;
-    }
-
-    [data-navopen] & {
-      rect {
-        y: 45px;
-
-        &:nth-of-type(1) {
-          transform: rotate(45deg);
-        }
-
-        &:nth-of-type(2) {
-          opacity: 0;
-        }
-
-        &:nth-of-type(3) {
-          transform: rotate(-45deg);
-        }
-      }
-    }
-  }
-
-  .mobile-nav__sheet {
-    visibility: hidden;
     background-color: var(--color-mobile-menu);
-    width: 90vw;
+    border-top: 1px solid var(--color-border);
-    height: 100vh;
+    z-index: 20;
-    padding: 2.25rem;
+    font-family: var(--ff-headings);
-    transform: translateX(100vw);
+    display: none;
-    z-index: 21;
+  }
 
-    [data-navopen] & {
+  @media (max-width: 666px) {
-      visibility: visible;
+    .mobile-bottom-nav {
-      pointer-events: auto;
+      display: block;
-      box-shadow: -10px 0 10px -10px var(--color-nearblack);
+    }
-      transform: translateX(10vw);
+
+    body {
+      padding-bottom: 5rem;
     }
   }
 
-  .mobile-nav__region {
+  .mobile-bottom-nav__list {
-    &:not(:empty) {
+    display: flex;
-      margin-block-end: 0.5rem;
+    flex-direction: row;
-    }
+    justify-content: space-around;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    height: 5rem;
+    list-style: none;
   }
 
-  .mobile-nav__navbar {
+  .mobile-bottom-nav__item {
+    list-style: none;
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .mobile-bottom-nav__link {
     display: flex;
     flex-direction: column;
-    padding-inline-start: 0;
+    align-items: center;
-    margin-block: 0;
+    justify-content: center;
+    gap: 0.25rem;
+    padding: 0.5rem;
+    color: light-dark(var(--color-black), var(--color-grey-300));
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 0.7rem;
+    font-weight: 500;
+    transition: color 150ms ease;
+    width: 100%;
+    height: 100%;
 
-    li {
+    .icon {
-      list-style: none;
+      width: 1.5rem;
+      height: 1.5rem;
+      flex-shrink: 0;
+      display: block;
+      color: inherit;
     }
 
-    a {
+    &:hover,
-      display: inline-block;
+    &:focus-visible {
-      padding-block: 0.5rem;
+      color: light-dark(var(--color-black), var(--color-white));
+      outline: none;
+    }
+
+    &[aria-current="page"] {
+      color: var(--color-link);
+      font-weight: 600;
     }
   }
 
-  .mobile-nav__cover,
+  .mobile-bottom-nav__label {
-  .mobile-nav__toggle,
+    display: block;
-  .mobile-nav__hamburger > rect,
+    line-height: 1;
-  .mobile-nav__sheet {
-    /* Add some transitions unless user prefer less motion. */
-    @media (prefers-reduced-motion: no-preference) {
-      transition: all 130ms ease-in;
-
-      [data-navopen] & {
-        transition: all 330ms ease-out;
-      }
-    }
   }
 }
+
+
+
+
+
+

assets/js/mobilemenu.js

@@ -1,67 +1,16 @@
 /**
  * @file
- * A JavaScript file for the mobile menu.
+ * A JavaScript file for the mobile bottom navigation menu.
  */
 
 (function () {
+  // Hide the main menu on small screens
   const main_menu = document.querySelector('.main-menu');
   const header_region = document.querySelector('.header__region');
-  const nav = document.querySelector('.mobile-nav');
-  const sheet = document.querySelector('.mobile-nav__sheet');
-  const toggle = document.querySelector('.mobile-nav__toggle');
-
-  // Switch to mobil menu on small screens.
-  // The mobile menu depends on js so we use js to activate it.
   const small_screen = window.matchMedia('(max-width: 666px)').matches;
+  
   if (small_screen) {
-    main_menu.hidden = true;
+    if (main_menu) main_menu.hidden = true;
-    header_region.hidden = true;
+    if (header_region) header_region.hidden = true;
-    nav.hidden = false;
-  }
-
-  function navopen() {
-    nav.dataset.navopen = 'true';
-    sheet.setAttribute('aria-hidden', 'false');
-    toggle.setAttribute('aria-expanded', 'true');
-    document.body.addEventListener('keydown', closeonesc);
-  }
-
-  function navclose() {
-    delete nav.dataset.navopen;
-    sheet.setAttribute('aria-hidden', 'true');
-    toggle.setAttribute('aria-expanded', 'false');
-    document.body.removeEventListener('keydown', closeonesc);
-  }
-
-  // Close the nav sheet with "esc" key.
-  function closeonesc(e) {
-    if (e.key === 'Escape') {
-      navclose();
-    }
-  }
-
-  // Toggle the mobile nav sheet.
-  const toggles = document.querySelectorAll('.mobile-nav__cover, .mobile-nav__toggle');
-  toggles.forEach(function (toggle) {
-    toggle.addEventListener('click', function (e) {
-      e.preventDefault();
-      if (nav.dataset.navopen) {
-        navclose();
-      } else {
-        navopen();
-      }
-    });
-  });
-
-  // Close the nav sheet after click (needed for anchor links).
-  const links = document.querySelectorAll('.mobile-nav__sheet a');
-  links.forEach(function (link) {
-    link.addEventListener('click', () => navclose());
-  });
-
-  // Move focus back to button efter user tab out of last link.
-  if (links.length) {
-    const lastlink = [].slice.call(links).pop();
-    lastlink.addEventListener('blur', () => toggle.focus());
   }
 })();