add mobile header / collapsible nav menu

_includes/header.njk

@@ -1,9 +1,15 @@
 <header>
+  <div id="header-veil"></div>
   <div class="header-container content">
     <a id="header-logo" href="{{ "/" | locale_url }}" title="home">
       <img alt="ESE {{year}} Logo" src="/static/ESELogo24.svg">
     </a>
     <nav id="mainNav">
+      <button id="menu-toggle" onclick="toggleMenu()" aria-expanded="false"
+        aria-label="{{ 'toggle menu' if lang == 'en' else 'Menü ausklappen' }}">
+        {% icon "solid:bars" %}
+      </button>
+
       {% set navPages = collections.mainNav | pageLang | eleventyNavigation %}
       <ul>
         {%- for entry in navPages -%}
@@ -23,3 +29,15 @@
 {% css %}
   {% include "header.css" %}
 {% endcss %}
+
+{% js %}
+  function toggleMenu() {
+    const menuToggle = document.getElementById("menu-toggle");
+    const mainNav = document.getElementById("mainNav");
+    const expanded = menuToggle.getAttribute("aria-expanded") === "true";
+
+    menuToggle.setAttribute("aria-expanded", !expanded);
+    mainNav.classList.toggle("open");
+    document.body.classList.toggle("noscroll");
+  }
+{% endjs %}