disclosure-bureau/web/components/site-header.tsx
Luiz Gustavo 3e88a64933
Some checks failed
CI / Web — typecheck + lint + build (push) Failing after 1m16s
CI / Scripts — Python smoke (push) Failing after 36s
CI / Web — npm audit (push) Failing after 28s
CI / Retrieval — golden set (Recall@5 + MRR) (push) Failing after 4s
W5.8: language toggle in the navbar (whole-site PT-BR / EN)
User: "quero que o usuário possa escolher o idioma na navbar, e então leia
o site todo em seu idioma."

The locale infrastructure already existed (cookie + getLocale() + every
page renders bilingual). The toggle only lived as a subtle floating
control bottom-left. This surfaces it in the navbars where users expect
it, and confirms whole-site language switching.

  locale-toggle-client.tsx
    - New variant="navbar": gold-amber pill matching the magazine theme
      (PT | EN, active = solid gold). Retro green variant kept for the
      floating fallback.
    - Guard: clicking the already-active language is a no-op.
    - aria-pressed on each button for a11y.

  locale-toggle.tsx: LocaleToggle gains variant passthrough.

  site-header.tsx: <LocaleToggle variant="navbar"> added to the main nav
    (homepage + /sightings /witnesses /objects /locations /operations
    /documents).

  bureau-nav.tsx: optional `locale` prop renders the same toggle pushed
    to the right (ml-auto) on /bureau, /c/[slug], /h/[id], /jobs/[id].
    All four callers now pass locale (getLocale added to h + jobs pages).

Cookie-based: switching sets `locale` cookie + router.refresh(); the
server re-renders every component through getLocale(), so the entire
page — headers, hero, summaries, case narratives, entity cards — flips
language in one click. The floating bottom-left toggle stays as a global
fallback for pages without a navbar (/d, /e, /search, /graph).

Also this session: Sun-Tzu smoke succeeded on the refreshed
CLAUDE_CODE_OAUTH_TOKEN — brief B-0001 written for the green fireballs
("bolas de fogo verdes confinadas ao corredor nuclear... cor espectral
e trajetória quase horizontal que os próprios analistas consideraram
irreconciliáveis com meteoros naturais", 3 pillars). Bulk entity
enrichment resumed in the background.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-24 22:54:37 -03:00

47 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";
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">
<span className="text-[#e0c080] text-lg"></span>
<span className="font-display text-xl text-[#e7ecf3] group-hover:text-[#e0c080] transition-colors">
The Disclosure Bureau
</span>
</Link>
<nav className="flex items-center gap-1 text-[12px] 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-1"><LocaleToggle current={locale} variant="navbar" /></span>
<span className="ml-1"><AuthBar /></span>
</nav>
</div>
</header>
);
}
function NavLink({ href, label }: { href: string; label: string }) {
return (
<Link
href={href}
className="px-2.5 py-1.5 rounded text-[#9aa6b8] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.06)] transition-colors"
>
{label}
</Link>
);
}