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>
33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* NavLink — primary-nav link with an active-page indicator.
|
|
*
|
|
* Reads usePathname to decide whether this link points at the active route,
|
|
* then renders a visible gold underline plus a brighter text colour and
|
|
* sets `aria-current="page"` for screen readers. A link counts as active for
|
|
* its exact path AND for descendant paths (e.g. /sightings is active when
|
|
* on /sightings/EV-1947-…), so deep pages still highlight their section.
|
|
*/
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
export function NavLink({ href, label }: { href: string; label: string }) {
|
|
const pathname = usePathname() || "/";
|
|
const isActive =
|
|
pathname === href || (href !== "/" && pathname.startsWith(`${href}/`));
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
aria-current={isActive ? "page" : undefined}
|
|
className={
|
|
isActive
|
|
? "px-2.5 py-1.5 rounded text-[#e0c080] bg-[rgba(224,192,128,0.10)] border-b-2 border-[#e0c080] -mb-[2px] transition-colors"
|
|
: "px-2.5 py-1.5 rounded text-[#cbd2dd] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.06)] border-b-2 border-transparent -mb-[2px] transition-colors"
|
|
}
|
|
>
|
|
{label}
|
|
</Link>
|
|
);
|
|
}
|