Personal Website, vers. 1 (pushed far to late)

client/js/nav.js

@@ -0,0 +1,61 @@
+export function initNav() {
+  const header = document.querySelector('[data-header]');
+  if (!header) return;
+  const root = document.documentElement;
+  const toggle = header.querySelector('[data-menu-toggle]');
+  const nav = header.querySelector('[data-nav]');
+  const label = toggle.querySelector('.menu-toggle__label');
+  const outside = [document.querySelector('main'), document.querySelector('.site-footer')];
+
+  let lastY = scrollY;
+  let ticking = false;
+
+  function onScroll() {
+    const y = scrollY;
+    header.classList.toggle('is-scrolled', y > 24);
+    if (!root.classList.contains('menu-open')) {
+      // hide while scrolling down, come back as soon as the user scrolls up
+      if (y > lastY + 4 && y > 240) header.classList.add('is-hidden');
+      else if (y < lastY - 4 || y <= 240) header.classList.remove('is-hidden');
+    }
+    lastY = y;
+    ticking = false;
+  }
+
+  addEventListener(
+    'scroll',
+    () => {
+      if (!ticking) requestAnimationFrame(onScroll);
+      ticking = true;
+    },
+    { passive: true },
+  );
+  onScroll();
+
+  header.addEventListener('focusin', () => header.classList.remove('is-hidden'));
+
+  function setOpen(open) {
+    toggle.setAttribute('aria-expanded', String(open));
+    root.classList.toggle('menu-open', open);
+    label.textContent = open ? label.dataset.labelClose : label.dataset.labelOpen;
+    for (const element of outside) if (element) element.inert = open;
+    if (open) header.classList.remove('is-hidden');
+  }
+
+  toggle.addEventListener('click', () => setOpen(toggle.getAttribute('aria-expanded') !== 'true'));
+
+  nav.addEventListener('click', (event) => {
+    if (event.target.closest('a')) setOpen(false);
+  });
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && root.classList.contains('menu-open')) {
+      setOpen(false);
+      toggle.focus();
+    }
+  });
+
+  matchMedia('(min-width: 48em)').addEventListener('change', (event) => {
+    if (event.matches) setOpen(false);
+  });
+}