add mobile header / collapsible nav menu

_includes/header.css

@@ -2,9 +2,9 @@ header {
   display: flex;
   position: sticky;
   top: 0;
-  min-height: 9rem;
   padding: 2rem 0;
   backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
   background-color: var(--color-background-header);
   box-shadow: 0 3px 15px hsla(0,0%,39.2%,.12);
 }
@@ -12,7 +12,12 @@ header {
 .header-container {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+}
+
+@media (width >= 1024px) {
+  .header-container {
+    align-items: center;
+  }
 }
 
 #header-logo img {
@@ -20,6 +25,15 @@ header {
   display: block;
 }
 
+@media (width < 1024px) {
+  header {
+    padding: 1.5rem 0;
+  }
+  #header-logo img {
+    max-height: 48px;
+  }
+}
+
 #mainNav ul {
   margin: 0;
   padding: 0;
@@ -53,15 +67,7 @@ header {
   transition: opacity .3s ease-out;
 }
 
-.nav-item:hover::after,
-.nav-item.active::after {
-  opacity: 1;
-}
-
 .nav-item-stream {
-  padding: .75rem 1.4rem;
-  border: 2px solid var(--color-primary);
-  border-radius: 3rem;
   color: var(--color-primary);
   font-family: Aileron;
   font-weight: 500;
@@ -72,7 +78,100 @@ header {
   transition-property: color, background-color;
 }
 
-.nav-item-stream:hover {
-  color: var(--color-livestream-active);
-  background-color: var(--color-primary);
+@media (width >= 1024px) {
+  .nav-item:hover::after,
+  .nav-item.active::after {
+    opacity: 1;
+  }
+  .nav-item-stream {
+    padding: .75rem 1.4rem;
+    border: 2px solid var(--color-primary);
+    border-radius: 3rem;
+  }
+  .nav-item-stream:hover {
+    color: var(--color-livestream-active);
+    background-color: var(--color-primary);
+  }
+}
+
+#menu-toggle {
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: .7rem;
+  /* same height as logo */
+  width: 48px;
+  height: 48px;
+}
+
+#menu-toggle .icon {
+  fill: var(--color-text);
+  transition: fill .2s ease-out;
+}
+
+#mainNav.open #menu-toggle .icon,
+#menu-toggle:hover .icon {
+  fill: var(--color-primary);
+}
+
+#header-veil {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 100vh;
+  background-color: rgba(0,0,0,.5);
+  opacity: 0;
+  transition: opacity .4s ease;
+  pointer-events: none;
+}
+
+@media (width < 1024px) {
+  #menu-toggle {
+    display: block;
+  }
+  #mainNav {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    overflow: hidden;
+  }
+  #mainNav ul {
+    transition: .4s ease;
+    transition-property: max-height, visibility;
+    max-height: 0;
+    visibility: hidden;
+  }
+  #mainNav.open ul {
+    max-height: 100vh;
+    visibility: visible;
+    transition-property: max-height;
+  }
+  #mainNav li {
+    display: block;
+    text-align: right;
+  }
+  .nav-item,
+  .nav-item-stream {
+    padding: .7rem .7rem;
+    display: block;
+    transition: text-decoration-color .3s ease-out;
+    text-decoration: 2px underline rgba(0,0,0,0);
+  }
+  .nav-item.active {
+    color: var(--color-primary);
+  }
+  .nav-item:hover,
+  .nav-item-stream:hover {
+    text-decoration-color: var(--color-primary);
+  }
+  /* prevent page scrolling */
+  .noscroll {
+    overflow: hidden;
+  }
+  #header-veil:has(+ .header-container #mainNav.open) {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }

_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 %}

_includes/page.njk

@@ -11,6 +11,9 @@ eleventyComputed:
     <title>{% if title %}{{ title }} | {% endif %}ESE {{ year }}</title>
     <link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
     <link rel="stylesheet" href="/aileron.lite.min.css">
+    <script>
+      {% getBundle "js" %}
+    </script>
   </head>
   <body>
     {% include 'header.njk' %}