590bb3283c
The lone "▍ The Disclosure Bureau" glyph read as a stray vertical bar next to small mono text — easy to lose against the navbar links. The brand needed visible weight without inventing a logotype from scratch. - BrandMark (new) — small inline SVG-free mark: three rounded gold bars at decreasing heights (100% / 70% / 45%), suggesting a redaction edge or a stack of classified-page tabs. Each bar lifts 1px on hover, so the mark gets a subtle physical response without animation libraries. - Wordmark switched to font-display font-semibold (was display regular) and bumped to 19/20px so it carries the row. - On desktop a tiny "CLASSIFIED · PUBLIC RECORD" microline in #5a6678 monospace sits beneath the wordmark; it disappears on mobile to keep the row tight inside the drawer. - Used in SiteHeader (every page) and inside the MobileNav drawer header — replaces the previous bare-text label there too. Verified at desktop 1440 and mobile 600 widths. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
53 lines
2.2 KiB
TypeScript
53 lines
2.2 KiB
TypeScript
/**
|
|
* SiteHeader — top navigation present on the homepage.
|
|
*
|
|
* Magazine-style — clean, with the brand mark left and a slim nav right.
|
|
* On narrow viewports the nav cluster collapses behind a hamburger drawer
|
|
* (MobileNav) so the row stops overflowing the screen edge.
|
|
* Sub-pages use BureauNav (sticky with breadcrumbs) instead.
|
|
*/
|
|
import Link from "next/link";
|
|
import { AuthBar } from "./auth-bar";
|
|
import { BrandMark } from "./brand-mark";
|
|
import { LocaleToggle } from "./locale-toggle";
|
|
import { MobileNav } from "./mobile-nav";
|
|
import { NavLink } from "./nav-link";
|
|
|
|
export function SiteHeader({ locale }: { locale: "pt-br" | "en" }) {
|
|
const items = [
|
|
{ href: "/sightings", label: locale === "en" ? "Sightings" : "Avistamentos" },
|
|
{ href: "/witnesses", label: locale === "en" ? "Witnesses" : "Testemunhas" },
|
|
{ href: "/objects", label: locale === "en" ? "Craft" : "Objetos" },
|
|
{ href: "/locations", label: locale === "en" ? "Locations" : "Locais" },
|
|
{ href: "/operations", label: locale === "en" ? "Programs" : "Programas" },
|
|
{ href: "/bureau", label: locale === "en" ? "Case files" : "Casos" },
|
|
{ href: "/search", label: locale === "en" ? "Search" : "Busca" },
|
|
];
|
|
|
|
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">
|
|
<Link href="/" aria-label="The Disclosure Bureau — home">
|
|
<BrandMark />
|
|
</Link>
|
|
|
|
{/* Desktop nav — hidden below md, shown md+. */}
|
|
<nav
|
|
aria-label={locale === "en" ? "Primary" : "Principal"}
|
|
className="hidden md:flex items-center gap-1 text-[13px] font-mono"
|
|
>
|
|
{items.map((it) => (
|
|
<NavLink key={it.href} href={it.href} label={it.label} />
|
|
))}
|
|
<span className="ml-2"><LocaleToggle current={locale} variant="navbar" /></span>
|
|
<span className="ml-2"><AuthBar locale={locale} /></span>
|
|
</nav>
|
|
|
|
{/* Mobile menu — hamburger + drawer; hidden md+. */}
|
|
<div className="md:hidden">
|
|
<MobileNav locale={locale} items={items} />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|