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>
84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { Globe } from "lucide-react";
|
|
import type { Locale } from "./locale-toggle";
|
|
|
|
export function LocaleToggleClient({
|
|
current,
|
|
variant = "retro",
|
|
}: { current: Locale; variant?: "retro" | "navbar" }) {
|
|
function setLocale(next: Locale) {
|
|
if (next === current) return;
|
|
document.cookie = `locale=${next}; path=/; max-age=${60 * 60 * 24 * 365}; SameSite=Lax`;
|
|
// Hard reload, not router.refresh(): the latter re-fetches the route's
|
|
// server tree but Next.js can keep a stale <title>/<meta> because metadata
|
|
// is rendered up in the layout tree which isn't always re-invalidated.
|
|
// A full navigation re-runs generateMetadata against the new cookie, so
|
|
// the tab title, OG tags, and html lang attribute all switch together.
|
|
window.location.reload();
|
|
}
|
|
|
|
if (variant === "navbar") {
|
|
// Gold-amber magazine theme to match SiteHeader / BureauNav.
|
|
// The active locale fills with gold; the inactive one stays muted text.
|
|
// Sized to be unmistakably readable in the navbar — the previous 11px pill
|
|
// disappeared visually next to the other links.
|
|
return (
|
|
<div
|
|
role="group"
|
|
aria-label="Language"
|
|
className="inline-flex items-center font-mono text-[12px] uppercase tracking-wider border border-[rgba(224,192,128,0.35)] rounded-full overflow-hidden"
|
|
>
|
|
<span className="pl-2.5 pr-1.5 py-1 text-[#9aa6b8]" aria-hidden="true">
|
|
<Globe size={12} />
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setLocale("pt-br")}
|
|
aria-pressed={current === "pt-br"}
|
|
aria-label="Português (Brasil)"
|
|
className={`px-2.5 py-1 transition-colors ${
|
|
current === "pt-br"
|
|
? "bg-[#e0c080] text-[#0a0e1a] font-semibold"
|
|
: "text-[#cbd2dd] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)]"
|
|
}`}
|
|
>
|
|
PT
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setLocale("en")}
|
|
aria-pressed={current === "en"}
|
|
aria-label="English"
|
|
className={`px-2.5 py-1 transition-colors ${
|
|
current === "en"
|
|
? "bg-[#e0c080] text-[#0a0e1a] font-semibold"
|
|
: "text-[#cbd2dd] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)]"
|
|
}`}
|
|
>
|
|
EN
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="inline-flex items-center gap-1 font-mono text-[10px] uppercase tracking-widest border border-[rgba(0,255,156,0.32)] rounded">
|
|
<span className="px-2 py-1 text-[#5a6678]"><Globe size={11} /></span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setLocale("en")}
|
|
className={`px-2 py-1 ${current === "en" ? "bg-[rgba(0,255,156,0.12)] text-[#00ff9c]" : "text-[#8896aa] hover:text-[#7fdbff]"}`}
|
|
>
|
|
EN
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setLocale("pt-br")}
|
|
className={`px-2 py-1 ${current === "pt-br" ? "bg-[rgba(0,255,156,0.12)] text-[#00ff9c]" : "text-[#8896aa] hover:text-[#7fdbff]"}`}
|
|
>
|
|
PT-BR
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|