astro-knots
Mode

← All ship notes

fullstack-vc

Mobile-responsive header — hamburger drawer, anchored spacing

Mobile-responsive header

Why Care?

Mobile visitors couldn't navigate. The desktop nav was hidden at ≤640px with no replacement, and the right-side action cluster floated next to the brand instead of pinning to the right. Both fixed in one small change.

What Got Built

  • MobileNav.astro — hamburger button (3-bar → X morph) + full-width drawer beneath the sticky header. Drawer contents: flat links (Dojo, Webinars, Changelog, Log in) plus two <details> accordions for Working Groups and Projects, populated from the same loader data the desktop popdowns consume. Uses semantic <details>/<summary> so the no-JS fallback is real.

  • Header spacing fix — added margin-left: auto to .site-header__actions. The right cluster now anchors right whether or not the desktop nav is visible.

Behavior

  • Hidden at >640px (desktop nav stays the source of truth).

  • Visible at ≤640px (hamburger replaces desktop nav).

  • Closes on: direct re-press, Esc, outside-tap, any link navigation (MPA tears down the drawer naturally).

  • Body scroll locked while open (html.mnav-open { overflow: hidden }).

  • Respects prefers-reduced-motion.

A11y

  • Real <button> with aria-haspopup="menu", aria-expanded, aria-controls, dynamic aria-label ("Open menu" ↔ "Close menu").

  • Drawer panel has role="menu"; items have role="menuitem".

  • Esc returns focus to the trigger.

  • All links and accordion summaries meet 44px tap-target minimum.

Verification

  • pnpm astro check — zero new errors.

  • Resize between 800px and 600px to confirm the swap (desktop nav ↔ hamburger).

  • Hamburger interactions: open/close/Esc/outside-tap/link-click all behave.

  • Right-side actions stay pinned to the right edge in both viewport modes.