ux(nav): SiteHeader on every sub-page; BureauNav back to pure breadcrumb
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:
parent
0a4c319a14
commit
df05b21dff
5 changed files with 16 additions and 35 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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" },
|
||||
|
|
|
|||
|
|
@ -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" },
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue