← back to Butlr

public/js/hamburger.js

29 lines

(function () {
  const header = document.querySelector('.site-header');
  const btn    = document.getElementById('hamburger');
  const nav    = document.getElementById('site-nav');
  const close  = document.getElementById('hamburger-close');
  const scrim  = document.getElementById('nav-scrim');

  function setOpen(open) {
    if (!nav || !btn) return;
    nav.dataset.open = open ? '1' : '';
    btn.setAttribute('aria-expanded', String(!!open));
    nav.setAttribute('aria-hidden', String(!open));
    if (scrim) {
      if (open) scrim.removeAttribute('hidden');
      scrim.dataset.open = open ? '1' : '';
    }
    document.body.classList.toggle('nav-open', !!open);
  }
  btn   && btn.addEventListener('click', () => setOpen(nav.dataset.open !== '1'));
  close && close.addEventListener('click', () => setOpen(false));
  scrim && scrim.addEventListener('click', () => setOpen(false));
  document.addEventListener('keydown', e => { if (e.key === 'Escape') setOpen(false); });
  nav && nav.querySelectorAll('a').forEach(a => a.addEventListener('click', () => setTimeout(() => setOpen(false), 80)));

  function onScroll() { if (!header) return; header.classList.toggle('scrolled', window.scrollY > 64); }
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();