2ea350e283
Visual audit found several issues in the navbar / header layer; this pass addresses the cluster. - AuthBar: localize sign in/out + dev-disabled message; switch matrix-green (#00ff9c) to gold (#e0c080) to match the magazine palette. - NavLink (new): client component reading usePathname to mark the active section with aria-current="page" and a gold underline+fill, so the user knows where they are inside the entity hub. - Locale toggle: bump font to 12px, widen the pill, lift the active state's contrast. Hard reload on switch (window.location.reload) instead of router.refresh — that is what makes the <title>, <html lang> and og:locale actually update on toggle (router.refresh kept stale layout metadata). - Root layout: convert static `export const metadata` to generateMetadata() so title/description/OG/twitter all read the cookie per request. Drop the duplicate floating LocaleToggle at bottom-left; the navbar carries it now. - BureauNav: drop the cyan-on-home / gold-on-bureau split (palette mismatch with SiteHeader); single gold tone; localize "home"/"case files" + aria labels; mount AuthBar inside the bar so sub-pages get a sign-in surface. - Pages using BureauNav: drop the standalone <AuthBar /> below it (now duplicated). Affected: /bureau, /c/[slug], /h/[hypothesisId], /jobs/[id]. - Lift nav-link rest text from #9aa6b8 to #cbd2dd for WCAG-AA on near-black. Verified live: title/lang/og:locale switch with cookie; active link gold indicator on /sightings; "Entrar"/"Sign in" localizes; no double AuthBar. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
78 lines
3 KiB
TypeScript
78 lines
3 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";
|
|
|
|
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>
|
|
)}
|
|
|
|
<span className="ml-auto inline-flex items-center gap-2">
|
|
<LocaleToggle current={locale} variant="navbar" />
|
|
<AuthBar locale={locale} />
|
|
</span>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|