← back to Stars of Design

public/js/hamburger.js

41 lines

// Hamburger UR + off-canvas nav for the gucci-anatomy layout.
// Header transitions from transparent → solid once the user scrolls past the hero.

(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); });

  // Close nav after navigating to in-page anchor
  nav && nav.querySelectorAll('a').forEach(a => {
    a.addEventListener('click', () => setTimeout(() => setOpen(false), 80));
  });

  // Transparent → solid header on scroll past 64px
  function onScroll() {
    if (!header) return;
    header.classList.toggle('scrolled', window.scrollY > 64);
  }
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();