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>
97 lines
4.1 KiB
TypeScript
97 lines
4.1 KiB
TypeScript
/**
|
|
* BureauNav — top navigation bar present on every bureau sub-page.
|
|
*
|
|
* Solves "I'm stuck on this page, there's no way back" UX. Shows:
|
|
* - "← Home" (always → /)
|
|
* - "Bureau" (always → /bureau)
|
|
* - Breadcrumb trail of current page (passed via props)
|
|
* - Locale toggle + auth pill on the right
|
|
*
|
|
* Visually harmonised with SiteHeader (single gold palette, no cyan); labels
|
|
* localised.
|
|
*/
|
|
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. */
|
|
label: string;
|
|
/** When omitted the crumb is rendered as the current page (no link). */
|
|
href?: string;
|
|
}
|
|
|
|
const COPY = {
|
|
"pt-br": { home: "home", bureau: "casos", aria_home: "Voltar para a home", aria_bureau: "Listagem de casos" },
|
|
en: { home: "home", bureau: "case files", aria_home: "Back to home", aria_bureau: "Case file library" },
|
|
} as const;
|
|
|
|
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"}
|
|
className="sticky top-0 z-30 bg-[#0a0e1a]/95 backdrop-blur border-b border-[rgba(224,192,128,0.18)]"
|
|
>
|
|
<div className="mx-auto max-w-6xl px-4 py-2.5 flex items-center gap-3 flex-wrap text-[12px] font-mono">
|
|
<Link
|
|
href="/"
|
|
className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border border-[rgba(224,192,128,0.30)] text-[#cbd2dd] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)] transition-colors"
|
|
aria-label={t.aria_home}
|
|
>
|
|
<ArrowLeft size={12} aria-hidden="true" />
|
|
<span>{t.home}</span>
|
|
</Link>
|
|
|
|
<Link
|
|
href="/bureau"
|
|
className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border border-[rgba(224,192,128,0.50)] text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)] transition-colors"
|
|
aria-label={t.aria_bureau}
|
|
>
|
|
<span>{t.bureau}</span>
|
|
</Link>
|
|
|
|
{crumbs.length > 0 && (
|
|
<div className="text-[11px] text-[#5a6678] flex items-center gap-1.5 flex-wrap">
|
|
<span className="mx-1" aria-hidden="true">/</span>
|
|
{crumbs.map((c, i) => (
|
|
<span key={`${c.label}-${i}`} className="inline-flex items-center gap-1.5">
|
|
{c.href ? (
|
|
<Link href={c.href} className="hover:text-[#e0c080] transition-colors">{c.label}</Link>
|
|
) : (
|
|
<span className="text-[#e7ecf3]" aria-current="page">{c.label}</span>
|
|
)}
|
|
{i < crumbs.length - 1 && <span aria-hidden="true">/</span>}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 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>
|
|
);
|
|
}
|