ux(nav): mobile hamburger + slide-in drawer for narrow viewports

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>

web/components/bureau-nav.tsx

@@ -14,6 +14,7 @@ import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 import { AuthBar } from "./auth-bar";
 import { LocaleToggle, type Locale } from "./locale-toggle";
+import { MobileNav } from "./mobile-nav";
 
 export interface Crumb {
   /** Display label. */
@@ -29,6 +30,18 @@ const COPY = {
 
 export function BureauNav({ crumbs, locale = "pt-br" }: { crumbs: Crumb[]; locale?: Locale }) {
   const t = COPY[locale];
+  // Same item list as the SiteHeader on the home — the mobile drawer carries
+  // it so a reader on a case file can still jump to /sightings or /witnesses.
+  const navItems = [
+    { href: "/sightings",  label: locale === "en" ? "Sightings"  : "Avistamentos" },
+    { href: "/witnesses",  label: locale === "en" ? "Witnesses"  : "Testemunhas" },
+    { href: "/objects",    label: locale === "en" ? "Craft"      : "Objetos" },
+    { href: "/locations",  label: locale === "en" ? "Locations"  : "Locais" },
+    { href: "/operations", label: locale === "en" ? "Programs"   : "Programas" },
+    { href: "/bureau",     label: locale === "en" ? "Case files" : "Casos" },
+    { href: "/search",     label: locale === "en" ? "Search"     : "Busca" },
+  ];
+
   return (
     <nav
       aria-label={locale === "en" ? "Breadcrumb" : "Trilha"}
@@ -68,10 +81,16 @@ export function BureauNav({ crumbs, locale = "pt-br" }: { crumbs: Crumb[]; local
           </div>
         )}
 
-        <span className="ml-auto inline-flex items-center gap-2">
+        {/* Desktop right cluster — toggle + auth. Hidden on mobile; the
+            hamburger drawer carries the same controls there. */}
+        <span className="ml-auto hidden md:inline-flex items-center gap-2">
           <LocaleToggle current={locale} variant="navbar" />
           <AuthBar locale={locale} />
         </span>
+        {/* Mobile menu — hamburger that opens the full primary nav drawer. */}
+        <span className="ml-auto md:hidden">
+          <MobileNav locale={locale} items={navItems} />
+        </span>
       </div>
     </nav>
   );

web/components/mobile-nav.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+/**
+ * MobileNav — hamburger button + slide-in drawer for narrow viewports.
+ *
+ * The desktop SiteHeader holds the full primary nav inline; on mobile that
+ * cluster overflows past the viewport edge. This drawer keeps the brand
+ * always visible and tucks the rest behind a hamburger.
+ *
+ * Behaviour:
+ * - Opens on hamburger click, closes on backdrop click, ESC, link click,
+ *   or close button.
+ * - Locks body scroll while open so the page underneath doesn't jiggle.
+ * - Marks the active nav link via usePathname (mirrors NavLink).
+ * - aria-modal="true" + dialog role + escape handling for screen readers.
+ *
+ * The locale toggle and auth pill live inside the panel so the mobile
+ * surface offers every action the desktop navbar does.
+ */
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { Menu, X } from "lucide-react";
+import { AuthBar } from "./auth-bar";
+import { LocaleToggleClient } from "./locale-toggle-client";
+
+interface NavItem {
+  href: string;
+  label: string;
+}
+
+const COPY = {
+  "pt-br": { open: "Abrir menu", close: "Fechar menu", section: "Navegação" },
+  en:      { open: "Open menu", close: "Close menu",   section: "Navigation" },
+} as const;
+
+export function MobileNav({
+  locale,
+  items,
+}: { locale: "pt-br" | "en"; items: NavItem[] }) {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname() || "/";
+  const closeBtnRef = useRef<HTMLButtonElement>(null);
+  const t = COPY[locale];
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); };
+    window.addEventListener("keydown", onKey);
+    // Lock body scroll while the panel is open.
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    // Move focus to the close button so VoiceOver / TalkBack announce the
+    // dialog and keyboard users can dismiss it with one press.
+    closeBtnRef.current?.focus();
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  function isActive(href: string): boolean {
+    return pathname === href || (href !== "/" && pathname.startsWith(`${href}/`));
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        aria-label={t.open}
+        aria-expanded={open}
+        aria-controls="mobile-nav-panel"
+        className="inline-flex items-center justify-center w-10 h-10 rounded-md text-[#e7ecf3] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)] transition-colors"
+      >
+        <Menu size={22} aria-hidden="true" />
+      </button>
+
+      {open && (
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-label={t.section}
+          id="mobile-nav-panel"
+          className="fixed inset-0 z-50"
+        >
+          {/* Backdrop */}
+          <button
+            type="button"
+            aria-label={t.close}
+            onClick={() => setOpen(false)}
+            className="absolute inset-0 bg-[#0a0e1a]/80 backdrop-blur-sm"
+          />
+          {/* Panel */}
+          <div className="absolute top-0 right-0 h-full w-[85vw] max-w-sm bg-[#0d1220] border-l border-[rgba(224,192,128,0.20)] shadow-2xl flex flex-col">
+            <div className="flex items-center justify-between px-4 py-4 border-b border-[rgba(224,192,128,0.15)]">
+              <span className="font-display text-lg text-[#e7ecf3]">
+                <span className="text-[#e0c080] mr-1" aria-hidden="true">▍</span>
+                The Disclosure Bureau
+              </span>
+              <button
+                ref={closeBtnRef}
+                type="button"
+                onClick={() => setOpen(false)}
+                aria-label={t.close}
+                className="inline-flex items-center justify-center w-10 h-10 rounded-md text-[#cbd2dd] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)] transition-colors"
+              >
+                <X size={20} aria-hidden="true" />
+              </button>
+            </div>
+
+            <nav aria-label={t.section} className="flex-1 overflow-y-auto px-2 py-3">
+              <ul className="flex flex-col">
+                {items.map((it) => {
+                  const active = isActive(it.href);
+                  return (
+                    <li key={it.href}>
+                      <Link
+                        href={it.href}
+                        onClick={() => setOpen(false)}
+                        aria-current={active ? "page" : undefined}
+                        className={
+                          active
+                            ? "block px-3 py-3 rounded-md text-[15px] font-mono text-[#e0c080] bg-[rgba(224,192,128,0.10)] border-l-2 border-[#e0c080]"
+                            : "block px-3 py-3 rounded-md text-[15px] font-mono text-[#e7ecf3] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.06)] border-l-2 border-transparent transition-colors"
+                        }
+                      >
+                        {it.label}
+                      </Link>
+                    </li>
+                  );
+                })}
+              </ul>
+            </nav>
+
+            <div className="px-4 py-4 border-t border-[rgba(224,192,128,0.15)] flex items-center justify-between gap-3 flex-wrap">
+              <LocaleToggleClient current={locale} variant="navbar" />
+              <AuthBar locale={locale} />
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

web/components/site-header.tsx

@@ -2,17 +2,30 @@
  * SiteHeader — top navigation present on the homepage.
  *
  * Magazine-style — clean, with the brand mark left and a slim nav right.
+ * On narrow viewports the nav cluster collapses behind a hamburger drawer
+ * (MobileNav) so the row stops overflowing the screen edge.
  * Sub-pages use BureauNav (sticky with breadcrumbs) instead.
  */
 import Link from "next/link";
 import { AuthBar } from "./auth-bar";
 import { LocaleToggle } from "./locale-toggle";
+import { MobileNav } from "./mobile-nav";
 import { NavLink } from "./nav-link";
 
 export function SiteHeader({ locale }: { locale: "pt-br" | "en" }) {
+  const items = [
+    { href: "/sightings",  label: locale === "en" ? "Sightings"  : "Avistamentos" },
+    { href: "/witnesses",  label: locale === "en" ? "Witnesses"  : "Testemunhas" },
+    { href: "/objects",    label: locale === "en" ? "Craft"      : "Objetos" },
+    { href: "/locations",  label: locale === "en" ? "Locations"  : "Locais" },
+    { href: "/operations", label: locale === "en" ? "Programs"   : "Programas" },
+    { href: "/bureau",     label: locale === "en" ? "Case files" : "Casos" },
+    { href: "/search",     label: locale === "en" ? "Search"     : "Busca" },
+  ];
+
   return (
     <header className="border-b border-[rgba(224,192,128,0.15)]">
-      <div className="mx-auto max-w-7xl px-4 md:px-8 py-4 flex items-center justify-between gap-4 flex-wrap">
+      <div className="mx-auto max-w-7xl px-4 md:px-8 py-4 flex items-center justify-between gap-4">
         <Link href="/" className="flex items-center gap-2 group" aria-label="The Disclosure Bureau — home">
           <span className="text-[#e0c080] text-lg" aria-hidden="true">▍</span>
           <span className="font-display text-xl text-[#e7ecf3] group-hover:text-[#e0c080] transition-colors">
@@ -20,20 +33,22 @@ export function SiteHeader({ locale }: { locale: "pt-br" | "en" }) {
           </span>
         </Link>
 
+        {/* Desktop nav — hidden below md, shown md+. */}
         <nav
           aria-label={locale === "en" ? "Primary" : "Principal"}
-          className="flex items-center gap-1 text-[13px] font-mono"
+          className="hidden md:flex items-center gap-1 text-[13px] font-mono"
         >
-          <NavLink href="/sightings"   label={locale === "en" ? "Sightings"  : "Avistamentos"} />
+          {items.map((it) => (
-          <NavLink href="/witnesses"   label={locale === "en" ? "Witnesses"  : "Testemunhas"} />
+            <NavLink key={it.href} href={it.href} label={it.label} />
-          <NavLink href="/objects"     label={locale === "en" ? "Craft"      : "Objetos"} />
+          ))}
-          <NavLink href="/locations"   label={locale === "en" ? "Locations"  : "Locais"} />
-          <NavLink href="/operations"  label={locale === "en" ? "Programs"   : "Programas"} />
-          <NavLink href="/bureau"      label={locale === "en" ? "Case files" : "Casos"} />
-          <NavLink href="/search"      label={locale === "en" ? "Search"     : "Busca"} />
           <span className="ml-2"><LocaleToggle current={locale} variant="navbar" /></span>
           <span className="ml-2"><AuthBar locale={locale} /></span>
         </nav>
+
+        {/* Mobile menu — hamburger + drawer; hidden md+. */}
+        <div className="md:hidden">
+          <MobileNav locale={locale} items={items} />
+        </div>
       </div>
     </header>
   );