app/components/site-header.tsx

Functions

Imports

It imports app/components/enhance.tsx, app/components/search-trigger.tsx, app/components/site-logo.tsx, app/components/site-nav-panel.tsx, app/components/site-speculation.tsx, app/components/theme-toggle.tsx, app/lib/nav.ts, app/lib/seo.ts. Imported by app/components/error-page.tsx, app/components/page-shell.tsx, app/components/taxonomy-listing.tsx, app/routes/blog.$slug.tsx, app/routes/blog._index.tsx, app/routes/home.tsx, app/routes/publications.$slug.tsx, app/routes/publications.tsx, app/routes/search.tsx.

Source

1import { Link, useLocation } from "react-router";
2
3import { Enhance } from "~/components/enhance";
4import { SearchTrigger } from "~/components/search-trigger";
5import { SiteLogoHeader } from "~/components/site-logo";
6import { Icon, SiteNavPanel } from "~/components/site-nav-panel";
7import { SiteSpeculation } from "~/components/site-speculation";
8import { HeaderTip, ThemeToggle } from "~/components/theme-toggle";
9import { buildNav, type Menu, type NavIcon, type NavItem } from "~/lib/nav";
10import { SITE } from "~/lib/seo";
11
12const NAV_ID = "site-nav";
13const SHEET_ID = "site-sheet";
14const SHEET_TITLE_ID = "site-sheet-title";
15
16
17/*
18 * Invoker commands (`commandfor`, `command`): the menu button opens the sheet and its Close button closes it
19 * with no script, where the browser has them. React 19 has no props for them yet, so they are spread as
20 * plain attributes, which React writes as they are.
21 */
22const opens = { command: "show-modal", commandfor: SHEET_ID } as Record<string, string>;
23const closes = { command: "close", commandfor: SHEET_ID } as Record<string, string>;
24
25const glyph = (body: React.ReactNode) => (
26  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
27    {body}
28  </svg>
29);
30
31const CHEVRON = (
32  <svg className="cap-site-header-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
33    <path d="m6 9 6 6 6-6" />
34  </svg>
35);
36
37const inside = (item: NavItem, pathname: string) => pathname === item.to || pathname.startsWith(`${item.to}/`);
38
39/**
40 * A section and the panel that hangs from it: Capsomer's disclosure button (site-header.md, "Markup"), not a
41 * link and not a menuitem, because everything the panel shows is a link. `popoverTarget` opens the panel with
42 * no script; with script, Capsomer's behaviour takes the click (it cancels the native toggle) and writes
43 * `aria-expanded`. Inside the section the button carries the current page's underline (`data-current`).
44 */
45function NavEntry({ item, pathname }: { item: NavItem; pathname: string }) {
46  const here = inside(item, pathname);
47  const panel = `${NAV_ID}-${item.menu.id}`;
48  return (
49    <li data-nav-menu="">
50      <button
51        type="button"
52        className="cap-site-header-link"
53        data-cap-part="panel-trigger"
54        popoverTarget={panel}
55        aria-expanded="false"
56        aria-controls={panel}
57        data-nav-button=""
58        data-current={here ? "" : undefined}
59        data-section={here ? "" : undefined}
60      >
61        <span className="site-nav-button-label">{item.label}</span>
62        {CHEVRON}
63      </button>
64      <SiteNavPanel id={panel} label={item.label} menu={item.menu} pathname={pathname} />
65    </li>
66  );
67}
68
69type SheetLink = { to: string; label: string; icon?: NavIcon };
70
71/** A section's links for the phone's sheet, grouped as its desktop panel groups them, each once. */
72function sheetLinks(menu: Menu): SheetLink[] {
73  const [hub, ...quick] = menu.footer;
74  const all: SheetLink[] = [
75    ...(hub ? [hub] : []),
76    ...menu.tiles,
77    ...menu.tiles.flatMap((tile) => (tile.also ? [tile.also] : [])),
78    ...menu.rows.flatMap((row) => [
79      ...(row.to ? [{ to: row.to, label: row.title, icon: row.icon }] : []),
80      ...(row.links ?? []),
81    ]),
82    ...(menu.spotlight ? [{ to: menu.spotlight.to, label: menu.spotlight.title }] : []),
83    ...quick,
84  ];
85  const seen = new Set<string>();
86  return all.filter((link) => (seen.has(link.to) ? false : (seen.add(link.to), true)));
87}
88
89function SheetRow({ link, pathname }: { link: SheetLink; pathname: string }) {
90  return (
91    <li>
92      <Link to={link.to} aria-current={link.to === pathname ? "page" : undefined}>
93        <span className="cap-site-header-sheet-icon" aria-hidden="true">
94          {link.icon ? <Icon name={link.icon} /> : null}
95        </span>
96        <span className="cap-site-header-sheet-name">{link.label}</span>
97      </Link>
98    </li>
99  );
100}
101
102/**
103 * Capsomer's site header (capsomer/components/site-header/site-header.md), written by hand because the public
104 * plane does not hydrate: 56px, sticky, full width; the site's logo, its five sections on the right after the
105 * divider, then Search and the theme, with the avatar's slot held empty after it so the theme sits where the admin's does. Under 768px it is one row, and a Menu button opens
106 * the sheet with every section's links. Every link is in this markup with no script; app/enhance/header.ts
107 * wires Capsomer's behaviour (the panels, the tips, the sheet) on top. No `prefetch="intent"`: it needs React
108 * handlers and this plane does not hydrate, so hover prefetch comes from `SiteSpeculation`.
109 */
110export function SiteHeader() {
111  const { pathname } = useLocation();
112  const nav = buildNav();
113  return (
114    <header className="cap-site-header site-header" data-cap="site-header" data-links="right" data-site-header="">
115      <Link to="/" className="cap-site-header-logo site-header-brand">
116        {/* Decorative: the wordmark beside it is the link's name, so naming the mark would read twice. */}
117        <SiteLogoHeader className="site-header-mark" />
118        {SITE.name}
119      </Link>
120      <nav className="cap-site-header-sections site-header-nav" id={NAV_ID} aria-label="Site" data-site-nav="">
121        <ul>
122          {nav.map((item) => (
123            <NavEntry key={item.to} item={item} pathname={pathname} />
124          ))}
125        </ul>
126      </nav>
127      <div className="cap-site-header-tools site-header-tools">
128        <div className="cap-site-header-extras">
129          <SearchTrigger />
130        </div>
131        <ThemeToggle />
132        {/* The avatar's slot, held empty: the admin header has the avatar here, so the theme button sits at the
133            same place on every page. Sign in is the footer's Admin link (Dustin, 2026-10-15). */}
134        <div className="cap-site-header-account site-header-account-slot" aria-hidden="true" />
135        <button
136          type="button"
137          className="cap-site-header-icon cap-site-header-menu"
138          aria-label="Menu"
139          aria-haspopup="dialog"
140          aria-expanded="false"
141          aria-controls={SHEET_ID}
142          data-header-menu=""
143          {...opens}
144        >
145          {glyph(<path d="M4 7h16M4 12h16M4 17h16" />)}
146          <HeaderTip text="Menu" />
147        </button>
148      </div>
149      <dialog
150        className="cap-dialog cap-site-header-sheet"
151        data-cap="dialog"
152        data-placement="bottom"
153        id={SHEET_ID}
154        aria-labelledby={SHEET_TITLE_ID}
155      >
156        <div className="cap-dialog-header">
157          <h2 id={SHEET_TITLE_ID} className="cap-dialog-title cap-site-header-sheet-title" tabIndex={-1}>
158            {SITE.name} menu
159          </h2>
160        </div>
161        <div className="cap-dialog-body">
162          <nav aria-labelledby={SHEET_TITLE_ID}>
163            {nav.map((item) => (
164              <div key={item.to}>
165                <div className="cap-site-header-sheet-label">{item.label}</div>
166                <ul className="cap-site-header-sheet-list">
167                  {sheetLinks(item.menu).map((link) => (
168                    <SheetRow key={link.to} link={link} pathname={pathname} />
169                  ))}
170                </ul>
171              </div>
172            ))}
173          </nav>
174        </div>
175        <button
176          type="button"
177          className="cap-site-header-icon cap-dialog-close"
178          data-cap-part="close"
179          aria-label="Close"
180          {...closes}
181        >
182          {glyph(<path d="M6 6l12 12M18 6 6 18" />)}
183        </button>
184      </dialog>
185      {/* Here rather than in root's Layout, so it never reaches the admin plane. */}
186      <SiteSpeculation />
187      {/* Absent, every link is still in the markup and every panel still opens; see app/enhance/header.ts. */}
188      <Enhance module="header" />
189    </header>
190  );
191}