067ce7bee6
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>
55 lines
2.4 KiB
TypeScript
55 lines
2.4 KiB
TypeScript
/**
|
|
* 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">
|
|
<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">
|
|
The Disclosure Bureau
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop nav — hidden below md, shown md+. */}
|
|
<nav
|
|
aria-label={locale === "en" ? "Primary" : "Principal"}
|
|
className="hidden md:flex items-center gap-1 text-[13px] font-mono"
|
|
>
|
|
{items.map((it) => (
|
|
<NavLink key={it.href} href={it.href} label={it.label} />
|
|
))}
|
|
<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>
|
|
);
|
|
}
|