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>
40 lines
2 KiB
TypeScript
40 lines
2 KiB
TypeScript
/**
|
|
* SiteHeader — top navigation present on the homepage.
|
|
*
|
|
* Magazine-style — clean, with the brand mark left and a slim nav right.
|
|
* Sub-pages use BureauNav (sticky with breadcrumbs) instead.
|
|
*/
|
|
import Link from "next/link";
|
|
import { AuthBar } from "./auth-bar";
|
|
import { LocaleToggle } from "./locale-toggle";
|
|
import { NavLink } from "./nav-link";
|
|
|
|
export function SiteHeader({ locale }: { locale: "pt-br" | "en" }) {
|
|
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">
|
|
<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>
|
|
|
|
<nav
|
|
aria-label={locale === "en" ? "Primary" : "Principal"}
|
|
className="flex items-center gap-1 text-[13px] font-mono"
|
|
>
|
|
<NavLink href="/sightings" label={locale === "en" ? "Sightings" : "Avistamentos"} />
|
|
<NavLink href="/witnesses" label={locale === "en" ? "Witnesses" : "Testemunhas"} />
|
|
<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>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|