df05b21dff
Two related navbar issues from the audit: - Sub-pages on desktop only had the breadcrumb pills — readers on a case file couldn't get to /sightings or /witnesses without going home first. - Entity-list pages (/sightings, /witnesses, …) stacked SiteHeader AND BureauNav and BOTH carried a locale toggle + auth pill, surfacing every control twice. This pass unifies the chrome: - BureauNav slimmed: only the ← home pill, the section pill, and the breadcrumb trail. Locale toggle, auth pill and mobile hamburger removed — SiteHeader owns those. - SiteHeader added above BureauNav on /bureau, /c/[slug], /h/[id], and /jobs/[id]. The four pages that previously skipped it now have the full global nav on desktop and a single hamburger on mobile. - Entity-list pages (which already stacked the two) lose their duplicate controls; verified live: 1 toggle + 1 sign-in on /sightings, /bureau, /c/d44; 1 hamburger on mobile case files. No regressions on /documents or the home (both already followed the SiteHeader-only or stacked-correctly pattern). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
70 lines
2.8 KiB
TypeScript
70 lines
2.8 KiB
TypeScript
/**
|
|
* BureauNav — slim breadcrumb bar present on every bureau sub-page.
|
|
*
|
|
* Pure breadcrumb now: ← home, the section pill, and the trail of crumbs.
|
|
* The global primary nav, locale toggle and auth pill all live in
|
|
* SiteHeader, which is rendered above BureauNav on every sub-page; that
|
|
* stack is what gives the reader desktop access to /sightings, /witnesses,
|
|
* etc. from anywhere, and what gives mobile users a single hamburger
|
|
* instead of two stacked ones.
|
|
*/
|
|
import Link from "next/link";
|
|
import { ArrowLeft } from "lucide-react";
|
|
import { type Locale } from "./locale-toggle";
|
|
|
|
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];
|
|
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>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|