The mobile audit caught the primary nav overflowing past the viewport edge
("Programs" was clipped on the right at 390px), and sub-pages on mobile had
no access to the entity hub at all because BureauNav doesn't carry it.
- New MobileNav (client) — hamburger button that opens a right-side slide-in
panel containing the full primary nav, locale toggle and auth pill. ESC,
backdrop click, link click, and the close button all dismiss; body scroll
locks while open; focus jumps to the close button so screen readers
announce the dialog and keyboard users can dismiss in one keystroke.
- SiteHeader — hide desktop nav <md, show hamburger <md. Brand and trigger
are the only two elements in the row on mobile, so the overflow stops.
- BureauNav — same treatment: keep the breadcrumb pills, hide the desktop
right cluster <md, surface the hamburger <md. Means a case-file reader on
mobile can now jump to /sightings, /witnesses etc without going home
first.
- MobileNav imports LocaleToggleClient directly (not the server-component
LocaleToggle wrapper, which would fail Next.js's "client cannot import
server" rule and break the build).
Verified live at 390×844: drawer opens with all 7 links stacked + toggle +
Sign in; main nav row no longer overflows.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
067ce7bee6