components/site-header/site-header.react.tsx

Functions

Imports

It imports components/dialog/dialog.react.tsx, components/shell/shell.react.tsx, components/site-header/site-header-parts.react.tsx, components/site-header/site-header.ts, components/theme-switch/theme-switch.react.tsx, components/theme-switch/theme-switch.ts. Imported by components/admin-shell/admin-shell.react.tsx, components/site-header/examples.tsx.

Source

1import { Fragment, type ReactNode, useCallback, useEffect, useId, useRef, useState } from "react";
2import { Dialog, DialogBody, DialogHeader } from "../dialog/dialog.react.tsx";
3import type { LinkProps } from "../shell/shell.react.tsx";
4import { ThemeButton } from "../theme-switch/theme-switch.react.tsx";
5import { THEME_PREF, toggleTheme } from "../theme-switch/theme-switch.ts";
6import { CHEV, Disclosure, GroupList, type HeaderExtra, type HeaderLink, HeaderTip, MENU_ICON, PERSON_ICON, SheetGroup, type SiteHeaderProps, countName, part, plainLink } from "./site-header-parts.react.tsx";
7import { badgeText } from "./site-header.ts";
8
9export { countName, HeaderTip, SheetGroup } from "./site-header-parts.react.tsx";
10export type { HeaderLink, HeaderGroup, HeaderLogo, HeaderSwitcher, HeaderSection, HeaderExtra, HeaderAccountLink, HeaderAccount, SheetPart, SiteHeaderProps } from "./site-header-parts.react.tsx";
11
12export type { LinkProps };
13
14export function SiteHeader(props: SiteHeaderProps) {
15  const { logo, switchers = [], sections = [], links = "left", extras = [], theme = true, themePrefKey = THEME_PREF, themeKey, account, signIn, band, translucent, sticky = true, skipTo, renderLink = plainLink } = props;
16  const id = useId();
17  const menuButton = useRef<HTMLButtonElement>(null);
18  const sheetTitle = useRef<HTMLHeadingElement>(null);
19  // A picture that fails to load gives way to the initials under it.
20  const [failedAvatar, setFailedAvatar] = useState<string>();
21  const [sheetOpen, setSheetOpen] = useState(false);
22  const closeSheet = useCallback(() => setSheetOpen(false), []);
23
24  // The theme key, where the site binds single keys: not while a person types.
25  useEffect(() => {
26    if (!theme || !themeKey) return;
27    const want = themeKey.toLowerCase();
28    const onKey = (e: KeyboardEvent) => {
29      if (e.key.toLowerCase() !== want || e.ctrlKey || e.metaKey || e.altKey) return;
30      if ((e.target as Element | null)?.closest?.("input, textarea, select, [contenteditable='true']")) return;
31      toggleTheme(themePrefKey);
32    };
33    document.addEventListener("keydown", onKey);
34    return () => document.removeEventListener("keydown", onKey);
35  }, [theme, themeKey, themePrefKey]);
36
37  const icons = extras.filter((e) => e.kind !== "button").slice(0, 2);
38  const cta = extras.find((e) => e.kind === "button");
39  const signOutLabel = account ? `Sign out (${account.name})` : "Sign out";
40
41  const extra = (e: HeaderExtra) => {
42    const name = countName(e.label, e.count, e.countNote);
43    const inner = (
44      <>
45        {e.icon}
46        {e.count ? (
47          <span className="cap-site-header-badge" aria-hidden="true">
48            {badgeText(e.count)}
49          </span>
50        ) : null}
51        <HeaderTip text={e.label} keys={e.keys} />
52      </>
53    );
54    return e.href ? (
55      <Fragment key={e.id}>{renderLink({ href: e.href, className: "cap-site-header-icon", "aria-label": name, children: inner })}</Fragment>
56    ) : (
57      <button key={e.id} type="button" className="cap-site-header-icon" aria-label={name} onClick={e.onClick}>
58        {inner}
59      </button>
60    );
61  };
62
63  const accountPanel = account ? (
64    (account.panel ?? (
65      <>
66        <div className="cap-site-header-who">
67          <strong>{account.name}</strong>
68          {account.detail ? <small>{account.detail}</small> : null}
69        </div>
70        {account.groups?.map((g, i) => (
71          <Fragment key={g.label ?? i}>
72            <hr />
73            {g.label ? <div className="cap-site-header-panel-label">{g.label}</div> : null}
74            <ul className="cap-site-header-panel-list">
75              {g.links.map((l) => (
76                <li key={l.label}>
77                  {l.href ? (
78                    renderLink({ href: l.href, "aria-current": l.current ? "page" : undefined, children: l.label })
79                  ) : (
80                    <button type="button" data-panel-close="" onClick={l.onClick}>
81                      {l.label}
82                    </button>
83                  )}
84                </li>
85              ))}
86            </ul>
87          </Fragment>
88        ))}
89        {account.onSignOut || account.signOutHref ? (
90          <>
91            <hr />
92            <ul className="cap-site-header-panel-list">
93              <li>
94                {account.signOutHref ? (
95                  <a href={account.signOutHref}>Sign out</a>
96                ) : (
97                  <button type="button" data-panel-close="" disabled={account.signOutDisabled} onClick={account.onSignOut}>
98                    Sign out
99                  </button>
100                )}
101              </li>
102            </ul>
103          </>
104        ) : null}
105      </>
106    ))
107  ) : null;
108
109  const sectionLinks = sections.filter((s) => !s.groups && !s.panel && s.href).map((s): HeaderLink => ({ id: s.id, label: s.label, href: s.href!, current: s.current }));
110  const sheetName = props.sheetTitle ?? `${logo.label} menu`;
111
112  return (
113    // data-cap-ready: React wires this header itself, so a page-wide enhance() leaves it alone.
114    <header className="cap-site-header" data-cap="site-header" data-cap-ready="" data-links={links} data-band={band} data-translucent={translucent ? "" : undefined} data-sticky={sticky ? undefined : "false"}>
115      {skipTo ? (
116        <a className="cap-site-header-skip" href={skipTo}>
117          Skip to content
118        </a>
119      ) : null}
120      {renderLink({
121        href: logo.href,
122        className: "cap-site-header-logo",
123        "aria-label": logo.label,
124        children: (
125          <>
126            {logo.mark}
127            {logo.wordmark ?? <span aria-hidden="true">{logo.label}</span>}
128          </>
129        ),
130      })}
131      {switchers.length > 0 ? (
132        <div className="cap-site-header-switcher">
133          {switchers.map((s, i) => (
134            <Fragment key={s.id}>
135              {i > 0 ? (
136                <span className="cap-site-header-sep" aria-hidden="true">
137                  /
138                </span>
139              ) : null}
140              <Disclosure
141                id={`${id}-${s.id}`}
142                className="cap-site-header-switch"
143                name={s.name}
144                label={s.sheetLabel ?? s.name ?? s.label}
145                button={
146                  <>
147                    {s.tile ? (
148                      <span className="cap-site-header-switch-tile" data-tile={s.tile} aria-hidden="true" />
149                    ) : (
150                      s.mark
151                    )}
152                    <span>{s.label}</span>
153                    {CHEV}
154                  </>
155                }
156              >
157                {s.panel ?? <GroupList groups={s.groups} renderLink={renderLink} />}
158              </Disclosure>
159            </Fragment>
160          ))}
161        </div>
162      ) : null}
163      {sections.length > 0 ? (
164        <nav className="cap-site-header-sections" aria-label="Site">
165          <ul>
166            {sections.map((s) => (
167              <li key={s.id}>
168                {s.groups || s.panel ? (
169                  <Disclosure
170                    id={`${id}-${s.id}`}
171                    className="cap-site-header-link"
172                    current={s.current}
173                    label={s.label}
174                    button={
175                      <>
176                        {s.label}
177                        {CHEV}
178                      </>
179                    }
180                  >
181                    {s.panel ?? <GroupList groups={s.groups ?? []} renderLink={renderLink} />}
182                  </Disclosure>
183                ) : (
184                  renderLink({ href: s.href ?? "#", className: "cap-site-header-link", "aria-current": s.current ? "page" : undefined, children: s.label })
185                )}
186              </li>
187            ))}
188          </ul>
189        </nav>
190      ) : null}
191      <div className="cap-site-header-tools">
192        {icons.length > 0 || cta ? (
193          <div className="cap-site-header-extras">
194            {icons.map(extra)}
195            {cta ? (
196              cta.href ? (
197                renderLink({ href: cta.href, className: "cap-site-header-cta", children: cta.label })
198              ) : (
199                <button type="button" className="cap-site-header-cta" onClick={cta.onClick}>
200                  {cta.label}
201                </button>
202              )
203            ) : null}
204          </div>
205        ) : null}
206        {theme ? <ThemeButton prefKey={themePrefKey} shortcut={themeKey} className="cap-site-header-icon cap-site-header-theme" /> : null}
207        <div className="cap-site-header-account">
208          {account ? (
209            <Disclosure
210              id={`${id}-account`}
211              className="cap-site-header-icon cap-site-header-avatar"
212              name="Your account"
213              label="Your account"
214              align="end"
215              button={
216                <>
217                  <span className="cap-site-header-initials" data-initials={account.initials} aria-hidden="true">
218                    {account.avatar && account.avatar !== failedAvatar ? <img className="cap-site-header-avatar-image" src={account.avatar} alt="" onError={() => setFailedAvatar(account.avatar)} /> : null}
219                  </span>
220                  <HeaderTip text={account.name} />
221                </>
222              }
223            >
224              {accountPanel}
225            </Disclosure>
226          ) : signIn ? (
227            renderLink({
228              href: signIn.href,
229              className: "cap-site-header-signin",
230              children: (
231                <>
232                  {PERSON_ICON}
233                  <span className="cap-site-header-signin-text">{signIn.label ?? "Sign in"}</span>
234                </>
235              ),
236            })
237          ) : null}
238        </div>
239        <button ref={menuButton} type="button" className="cap-site-header-icon cap-site-header-menu" aria-label="Menu" aria-haspopup="dialog" aria-expanded={sheetOpen} aria-controls={`${id}-sheet`} onClick={() => setSheetOpen(true)}>
240          {MENU_ICON}
241        </button>
242      </div>
243      <Dialog open={sheetOpen} onOpenChange={(o) => !o && closeSheet()} placement="bottom" id={`${id}-sheet`} className="cap-site-header-sheet" aria-labelledby={`${id}-sheet-title`} initialFocus={sheetTitle}>
244        <DialogHeader>
245          <h2 id={`${id}-sheet-title`} className="cap-dialog-title cap-site-header-sheet-title" ref={sheetTitle} tabIndex={-1}>
246            {sheetName}
247          </h2>
248        </DialogHeader>
249        <DialogBody>
250          <nav aria-labelledby={`${id}-sheet-title`}>
251            {part(props.sheetStart, closeSheet)}
252            {switchers.map((s) =>
253              s.groups.map((g, i) => <SheetGroup key={`${s.id}-${i}`} label={g.label ?? s.sheetLabel ?? s.label} links={g.links} renderLink={renderLink} onClose={closeSheet} />),
254            )}
255            {sections
256              .filter((s) => s.groups)
257              .map((s) => (
258                <SheetGroup key={s.id} label={s.label} links={(s.groups ?? []).flatMap((g) => g.links)} renderLink={renderLink} onClose={closeSheet} />
259              ))}
260            {sectionLinks.length > 0 ? <SheetGroup label={sections.some((s) => s.groups) ? "More" : "Pages"} links={sectionLinks} renderLink={renderLink} onClose={closeSheet} /> : null}
261            {part(props.sheetEnd, closeSheet)}
262            {cta?.href ? renderLink({ href: cta.href, className: "cap-site-header-sheet-cta", onClick: closeSheet, children: cta.label }) : null}
263          </nav>
264        </DialogBody>
265        {account || signIn ? (
266          <nav className="cap-site-header-sheet-account" aria-label="Account">
267            <ul className="cap-site-header-sheet-list">
268              {account?.groups
269                ?.flatMap((g) => g.links)
270                .map((l) => {
271                  const inner = (
272                    <>
273                      <span className="cap-site-header-sheet-icon" aria-hidden="true" />
274                      <span className="cap-site-header-sheet-name">{l.label}</span>
275                    </>
276                  );
277                  return (
278                    <li key={l.label}>
279                      {l.href ? (
280                        renderLink({ href: l.href, "aria-current": l.current ? "page" : undefined, onClick: closeSheet, children: inner })
281                      ) : (
282                        <button type="button" onClick={() => (closeSheet(), l.onClick?.())}>
283                          {inner}
284                        </button>
285                      )}
286                    </li>
287                  );
288                })}
289              {account && (account.onSignOut || account.signOutHref) ? (
290                <li>
291                  {account.signOutHref ? (
292                    <a href={account.signOutHref}>
293                      <span className="cap-site-header-sheet-icon" aria-hidden="true" />
294                      <span className="cap-site-header-sheet-name">{signOutLabel}</span>
295                    </a>
296                  ) : (
297                    <button type="button" disabled={account.signOutDisabled} onClick={() => (closeSheet(), account.onSignOut?.())}>
298                      <span className="cap-site-header-sheet-icon" aria-hidden="true" />
299                      <span className="cap-site-header-sheet-name">{signOutLabel}</span>
300                    </button>
301                  )}
302                </li>
303              ) : null}
304              {!account && signIn ? (
305                <li>
306                  {renderLink({
307                    href: signIn.href,
308                    onClick: closeSheet,
309                    children: (
310                      <>
311                        <span className="cap-site-header-sheet-icon" aria-hidden="true" />
312                        <span className="cap-site-header-sheet-name">{signIn.label ?? "Sign in"}</span>
313                      </>
314                    ),
315                  })}
316                </li>
317              ) : null}
318            </ul>
319          </nav>
320        ) : null}
321      </Dialog>
322    </header>
323  );
324}
325
326// The bottom bar of a signed-in area on a phone: up to five of its top pages, no More (the menu
327// button opens the full list). Shown under 768px only. Put it last in the page, so it sticks to the
328// window's bottom edge.
329export function SiteTabs({ tabs, label = "Sections", renderLink = plainLink }: { tabs: HeaderLink[]; label?: string; renderLink?: (p: LinkProps) => ReactNode }) {
330  return (
331    <nav className="cap-site-tabs" aria-label={label}>
332      {tabs.slice(0, 5).map((t) => (
333        <Fragment key={t.id ?? t.href}>
334          {renderLink({
335            href: t.href,
336            "aria-current": t.current ? "page" : undefined,
337            "aria-label": t.count ? countName(t.label, t.count, t.countNote) : undefined,
338            children: (
339              <>
340                {t.icon}
341                {t.label}
342                {t.count ? " " : null}
343                {t.count ? (
344                  <span className="cap-site-header-badge" aria-hidden="true">
345                    {badgeText(t.count)}
346                  </span>
347                ) : null}
348              </>
349            ),
350          })}
351        </Fragment>
352      ))}
353    </nav>
354  );
355}