Untitled

Anonymous
Plain Text
02/19/2026 9:19 AM
4.8 KB
12
Indexable
Never
<script>
(function(){
  const script = document.currentScript;
  if (!script) return;
  const burgerContainer = script.closest('.nav_lines_contain');

  const topLine = burgerContainer.querySelector('.nav_lines.is-top');
  const midLine = burgerContainer.querySelector('.nav_lines.is-middle');
  const botLine = burgerContainer.querySelector('.nav_lines.is-bottom');

  const overlay = document.querySelector('.expanded-navmenu_wrap') 
             || document.querySelector('.expanded_navmenu_wrap')
             || document.querySelector('.expanded-navmenu_wrap.u-section')
             || document.querySelector('.expanded_navmenu_wrap.u-section');

  (function injectCSS(){
    if (document.getElementById('embed-nav-expanded-css')) return;
    const css = `
      .expanded-navmenu_wrap, .expanded_navmenu_wrap {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
        transform: translateY(-100vh) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
      }
      html.nav-expanded .expanded-navmenu_wrap,
      html.nav-expanded .expanded_navmenu_wrap {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
      }
      /* matched durations/easing for transform and opacity */
      .expanded-navmenu_wrap, .expanded_navmenu_wrap {
        transition: transform 360ms cubic-bezier(.2,.9,.2,1), opacity 360ms cubic-bezier(.2,.9,.2,1) !important;
        will-change: transform, opacity !important;
      }
    `;
    const s = document.createElement('style');
    s.id = 'embed-nav-expanded-css';
    s.appendChild(document.createTextNode(css));
    document.head.appendChild(s);
  })();

  // match burger line transitions to overlay timing/easing
  [topLine, midLine, botLine].forEach(el=>{
    if (!el) return;
    el.style.transition = 'transform 360ms cubic-bezier(.2,.9,.2,1), opacity 360ms cubic-bezier(.2,.9,.2,1)';
    el.style.transformOrigin = el.style.transformOrigin || '50% 50%';
  });

  // scroll lock helpers
  let scrollPos = 0;
  function lockScroll() {
    scrollPos = window.scrollY || window.pageYOffset || 0;
    document.documentElement.style.scrollBehavior = 'auto';
    document.body.style.position = 'fixed';
    document.body.style.top = `-${scrollPos}px`;
    document.body.style.left = '0';
    document.body.style.right = '0';
  }
  function unlockScroll() {
    document.body.style.position = '';
    document.body.style.top = '';
    document.body.style.left = '';
    document.body.style.right = '';
    window.scrollTo(0, scrollPos);
    document.documentElement.style.scrollBehavior = '';
  }

  // open/close logic
  let open = false;

  function openNav() {
    if (topLine) topLine.style.transform = 'translateY(8px)';
    if (botLine) botLine.style.transform = 'translateY(-8px)';
    if (midLine) { midLine.style.transform = 'scaleX(0.18)'; midLine.style.opacity = '0'; }

    document.documentElement.classList.add('nav-expanded');
    lockScroll();
    burgerContainer.setAttribute('aria-expanded', 'true');
    open = true;
  }

  function closeNav() {
    if (topLine) topLine.style.transform = '';
    if (botLine) botLine.style.transform = '';
    if (midLine) { midLine.style.transform = ''; midLine.style.opacity = ''; }

    document.documentElement.classList.remove('nav-expanded');
    burgerContainer.setAttribute('aria-expanded', 'false');
    open = false;

    if (overlay) {
      const onTransitionEnd = (ev) => {
        if (ev.propertyName === 'transform') {
          overlay.removeEventListener('transitionend', onTransitionEnd);
          clearTimeout(fallbackTimer);
          unlockScroll();
        }
      };
      const fallbackTimer = setTimeout(() => {
        overlay.removeEventListener('transitionend', onTransitionEnd);
        unlockScroll();
      }, 360);

      overlay.addEventListener('transitionend', onTransitionEnd);
    } else {
      unlockScroll();
    }
  }

  // initialize aria
  if (!burgerContainer.hasAttribute('aria-expanded')) burgerContainer.setAttribute('aria-expanded','false');

  // click toggle
  burgerContainer.addEventListener('click', function(e){
    e.preventDefault();
    if (!open) openNav(); else closeNav();
  });

  // overlay close hooks
  if (overlay) {
    const closeBtn = overlay.querySelector('.nav-close');
    if (closeBtn) closeBtn.addEventListener('click', function(e){ e.preventDefault(); closeNav(); });
    overlay.addEventListener('click', function(e){
      if (e.target === overlay) closeNav();
    });
  }

  // ESC to close
  document.addEventListener('keydown', function(e){
    if (e.key === 'Escape' && open) closeNav();
  });
})();
</script>
Editor is loading...
Leave a Comment