ux(nav): SiteHeader on every sub-page; BureauNav back to pure breadcrumb
Some checks failed
CI / Web — typecheck + lint + build (push) Failing after 37s
CI / Scripts — Python smoke (push) Failing after 5s
CI / Web — npm audit (push) Failing after 37s
CI / Retrieval — golden set (Recall@5 + MRR) (push) Failing after 6s

Two related navbar issues from the audit:
- Sub-pages on desktop only had the breadcrumb pills — readers on a case
  file couldn't get to /sightings or /witnesses without going home first.
- Entity-list pages (/sightings, /witnesses, …) stacked SiteHeader AND
  BureauNav and BOTH carried a locale toggle + auth pill, surfacing every
  control twice.

This pass unifies the chrome:

- BureauNav slimmed: only the ← home pill, the section pill, and the
  breadcrumb trail. Locale toggle, auth pill and mobile hamburger removed
  — SiteHeader owns those.
- SiteHeader added above BureauNav on /bureau, /c/[slug], /h/[id], and
  /jobs/[id]. The four pages that previously skipped it now have the full
  global nav on desktop and a single hamburger on mobile.
- Entity-list pages (which already stacked the two) lose their duplicate
  controls; verified live: 1 toggle + 1 sign-in on /sightings, /bureau,
  /c/d44; 1 hamburger on mobile case files.

No regressions on /documents or the home (both already followed the
SiteHeader-only or stacked-correctly pattern).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Luiz Gustavo 2026-05-29 01:41:30 -03:00
parent 0a4c319a14
commit df05b21dff
5 changed files with 16 additions and 35 deletions

View file

@ -7,6 +7,7 @@
*/
import { BureauNav } from "@/components/bureau-nav";
import { CaseLibraryBrowser } from "@/components/case-library-browser";
import { SiteHeader } from "@/components/site-header";
import { getLocale } from "@/components/locale-toggle";
import { loadCases } from "@/lib/cases";
@ -19,6 +20,7 @@ export default async function BureauPage() {
return (
<div className="min-h-screen bg-[#0a0e1a] text-[#e7ecf3]">
<SiteHeader locale={locale} />
<BureauNav locale={locale} crumbs={[{ label: locale === "en" ? "case files" : "casos" }]} />
<main id="main" className="mx-auto max-w-5xl px-4 md:px-8 py-10 md:py-14">
<header className="mb-8 md:mb-10">

View file

@ -11,6 +11,7 @@ import path from "node:path";
import type { Metadata } from "next";
import { MarkdownBody } from "@/components/markdown-body";
import { BureauNav } from "@/components/bureau-nav";
import { SiteHeader } from "@/components/site-header";
import { getLocale } from "@/components/locale-toggle";
import { pickLocaleBody } from "@/lib/bilingual";
@ -151,6 +152,7 @@ export default async function CaseReportPage({
return (
<div className="min-h-screen bg-[#0a0e1a] text-[#e7ecf3]">
<SiteHeader locale={locale} />
<BureauNav locale={locale} crumbs={[
{ label: locale === "en" ? "case files" : "casos", href: "/bureau" },
{ label: title.length > 32 ? title.slice(0, 32) + "…" : title },

View file

@ -17,6 +17,7 @@ import { readFile } from "node:fs/promises";
import path from "node:path";
import { pgQuery } from "@/lib/retrieval/db";
import { BureauNav } from "@/components/bureau-nav";
import { SiteHeader } from "@/components/site-header";
import { getLocale } from "@/components/locale-toggle";
import { RedTeamRequestButton } from "@/components/red-team-request-button";
@ -198,6 +199,7 @@ export default async function HypothesisPage({
return (
<div className="min-h-screen bg-[#0a0e1a] text-[#e7ecf3]">
<SiteHeader locale={navLocale} />
<BureauNav locale={navLocale} crumbs={[
{ label: "bureau", href: "/bureau" },
{ label: "hypotheses", href: "/bureau#hypotheses" },

View file

@ -18,6 +18,7 @@ import { notFound } from "next/navigation";
import Link from "next/link";
import { pgQuery } from "@/lib/retrieval/db";
import { BureauNav } from "@/components/bureau-nav";
import { SiteHeader } from "@/components/site-header";
import { getLocale } from "@/components/locale-toggle";
import { JobStatusPoller } from "@/components/job-status-poller";
@ -77,6 +78,7 @@ export default async function JobPage({
return (
<div className="min-h-screen bg-[#0a0e1a] text-[#e7ecf3]">
<SiteHeader locale={navLocale} />
<BureauNav locale={navLocale} crumbs={[
{ label: "bureau", href: "/bureau" },
{ label: "jobs", href: "/bureau#jobs" },

View file

@ -1,20 +1,16 @@
/**
* BureauNav top navigation bar present on every bureau sub-page.
* BureauNav slim breadcrumb bar present on every bureau sub-page.
*
* Solves "I'm stuck on this page, there's no way back" UX. Shows:
* - "← Home" (always /)
* - "Bureau" (always /bureau)
* - Breadcrumb trail of current page (passed via props)
* - Locale toggle + auth pill on the right
*
* Visually harmonised with SiteHeader (single gold palette, no cyan); labels
* localised.
* Pure breadcrumb now: home, the section pill, and the trail of crumbs.
* The global primary nav, locale toggle and auth pill all live in
* SiteHeader, which is rendered above BureauNav on every sub-page; that
* stack is what gives the reader desktop access to /sightings, /witnesses,
* etc. from anywhere, and what gives mobile users a single hamburger
* instead of two stacked ones.
*/
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { AuthBar } from "./auth-bar";
import { LocaleToggle, type Locale } from "./locale-toggle";
import { MobileNav } from "./mobile-nav";
import { type Locale } from "./locale-toggle";
export interface Crumb {
/** Display label. */
@ -30,18 +26,6 @@ const COPY = {
export function BureauNav({ crumbs, locale = "pt-br" }: { crumbs: Crumb[]; locale?: Locale }) {
const t = COPY[locale];
// Same item list as the SiteHeader on the home — the mobile drawer carries
// it so a reader on a case file can still jump to /sightings or /witnesses.
const navItems = [
{ 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 (
<nav
aria-label={locale === "en" ? "Breadcrumb" : "Trilha"}
@ -80,17 +64,6 @@ export function BureauNav({ crumbs, locale = "pt-br" }: { crumbs: Crumb[]; local
))}
</div>
)}
{/* Desktop right cluster toggle + auth. Hidden on mobile; the
hamburger drawer carries the same controls there. */}
<span className="ml-auto hidden md:inline-flex items-center gap-2">
<LocaleToggle current={locale} variant="navbar" />
<AuthBar locale={locale} />
</span>
{/* Mobile menu — hamburger that opens the full primary nav drawer. */}
<span className="ml-auto md:hidden">
<MobileNav locale={locale} items={navItems} />
</span>
</div>
</nav>
);