@twentyfirstmedia/ui-core 0.4.0 → 0.6.0

package/src/components/navigation.tsx

@@ -4,9 +4,11 @@ import { useStrings } from "../context.js";
 import { NAVIGATION_STRINGS } from "../strings.js";
 import { cx } from "../cx.js";
 import { Icon } from "../Icon.js";
-import { moveFocus, useControlled, useId, useOutside } from "../hooks.js";
-import { IconButton } from "./foundation.js";
+import { FOCUSABLE, moveFocus, useControlled, useId, useOutside } from "../hooks.js";
+import { Portal } from "../portal.js";
+import { Avatar, IconButton } from "./foundation.js";
 import { Menu } from "./feedback.js";
+import { Popover } from "./overlays.js";
 import type {
   BreadcrumbProps,
   MenubarProps,
@@ -15,6 +17,7 @@ import type {
   SidebarItem,
   SidebarProps,
   TabsProps,
+  UserMenuProps,
 } from "./types.js";
 
 /* ── Navigation ── */
@@ -107,14 +110,34 @@ export function Tabs(p: TabsProps) {
 
 export function Breadcrumb(p: BreadcrumbProps) {
   const t = useStrings(NAVIGATION_STRINGS);
-  const items = p.items || [];
+  const items = (p.items || []).map((it) => (typeof it === "string" ? { label: it } : it));
+  const Link = (p.linkAs || "a") as React.ElementType;
   return (
-    <nav className="tf-crumbs" aria-label={t.breadcrumb}>
+    <nav
+      style={p.style}
+      className={cx("tf-crumbs", p.className)}
+      aria-label={p.label || t.breadcrumb}
+    >
       {items.map((it, i) => {
         const last = i === items.length - 1;
+        const click = it.onClick || (p.onNavigate ? () => p.onNavigate?.(i) : undefined);
         return (
           <React.Fragment key={i}>
-            {last ? <span aria-current="page">{it}</span> : <a href="#">{it}</a>}
+            {last ? (
+              <span className="tf-crumb" aria-current="page">
+                {it.label}
+              </span>
+            ) : it.href ? (
+              <Link className="tf-crumb" href={it.href} onClick={it.onClick}>
+                {it.label}
+              </Link>
+            ) : click ? (
+              <button type="button" className="tf-crumb" onClick={click}>
+                {it.label}
+              </button>
+            ) : (
+              <span className="tf-crumb">{it.label}</span>
+            )}
             {!last && <Icon name="chevronRight" size={13} />}
           </React.Fragment>
         );
@@ -139,21 +162,40 @@ export function Pagination(p: PaginationProps) {
     if (i === 1 || i === total || Math.abs(i - cur) <= 1) pages.push(i);
     else if (pages[pages.length - 1] !== "…") pages.push("…");
   }
+  const Link = (p.linkAs || "a") as React.ElementType;
+  const step = (to: number, icon: "chevronLeft" | "chevronRight", label: string) => {
+    const off = to < 1 || to > total;
+    // links cannot be disabled: at the ends the arrow is a disabled button
+    return p.href && !off ? (
+      <IconButton icon={icon} label={label} size="sm" asChild>
+        <Link href={p.href(to)} onClick={() => go(to)} />
+      </IconButton>
+    ) : (
+      <IconButton icon={icon} label={label} size="sm" disabled={off} onClick={() => go(to)} />
+    );
+  };
   return (
-    <nav className="tf-pager" aria-label={t.pagination}>
-      <IconButton
-        icon="chevronLeft"
-        label={t.previousPage}
-        size="sm"
-        onClick={() => {
-          go(cur - 1);
-        }}
-      />
+    <nav
+      style={p.style}
+      className={cx("tf-pager", p.className)}
+      aria-label={p.label || t.pagination}
+    >
+      {step(cur - 1, "chevronLeft", t.previousPage)}
       {pages.map((n, i) =>
         n === "…" ? (
           <span key={"e" + i} className="tf-page" aria-hidden>
             …
           </span>
+        ) : p.href ? (
+          <Link
+            key={n}
+            href={p.href(n)}
+            className="tf-page"
+            aria-current={n === cur ? "page" : undefined}
+            onClick={() => go(n)}
+          >
+            {n}
+          </Link>
         ) : (
           <button
             key={n}
@@ -168,14 +210,7 @@ export function Pagination(p: PaginationProps) {
           </button>
         ),
       )}
-      <IconButton
-        icon="chevronRight"
-        label={t.nextPage}
-        size="sm"
-        onClick={() => {
-          go(cur + 1);
-        }}
-      />
+      {step(cur + 1, "chevronRight", t.nextPage)}
     </nav>
   );
 }
@@ -358,16 +393,288 @@ export function NavigationMenu(p: NavigationMenuProps) {
 }
 
 /* ── Sidebar: app navigation with groups, nested pages and a collapsed (icons) mode ── */
+/** Whether the screen is phone-sized (the sidebar becomes a drawer there). */
+function usePhone(): boolean {
+  const [phone, setPhone] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(max-width: 760px)");
+    const on = () => setPhone(mq.matches);
+    on();
+    mq.addEventListener("change", on);
+    return () => mq.removeEventListener("change", on);
+  }, []);
+  return phone;
+}
+
+const typing = (t: EventTarget | null) =>
+  t instanceof HTMLElement && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName));
+
+/**
+ * A layer next to an element (tooltip, flyout, item menu), drawn in the portal so the sidebar's
+ * scrolling body does not clip it, and kept on screen.
+ */
+function SideLayer(p: {
+  anchor: HTMLElement | null;
+  place: "right" | "below-end";
+  center?: boolean;
+  className?: string;
+  layerRef?: React.MutableRefObject<HTMLDivElement | null>;
+  onPointerEnter?: () => void;
+  onPointerLeave?: () => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+  role?: string;
+  label?: string;
+  hidden?: boolean;
+  /** Move the focus into the layer when it appears (opened from the keyboard) */
+  autoFocus?: boolean;
+  children: React.ReactNode;
+}) {
+  const el = React.useRef<HTMLDivElement | null>(null);
+  const place = React.useCallback(() => {
+    const box = el.current,
+      a = p.anchor;
+    if (!box || !a) return;
+    box.style.left = "0px";
+    box.style.top = "0px";
+    // where 0,0 lands: the layer's containing block may not be the screen (a transformed parent)
+    const o = box.getBoundingClientRect(),
+      r = a.getBoundingClientRect();
+    let left = p.place === "right" ? r.right + 8 : r.right - o.width;
+    let top =
+      p.place === "right" ? (p.center ? r.top + r.height / 2 - o.height / 2 : r.top) : r.bottom + 4;
+    left = Math.max(8, Math.min(left, window.innerWidth - o.width - 8));
+    top = Math.max(8, Math.min(top, window.innerHeight - o.height - 8));
+    box.style.left = `${left - o.left}px`;
+    box.style.top = `${top - o.top}px`;
+  }, [p.anchor, p.place, p.center]);
+  const { layerRef, autoFocus } = p;
+  // stable, so it runs when the layer appears (the portal mounts a render later), not on every render
+  const attach = React.useCallback(
+    (n: HTMLDivElement | null) => {
+      el.current = n;
+      if (layerRef) layerRef.current = n;
+      if (!n) return;
+      place();
+      if (autoFocus) n.querySelector<HTMLElement>(FOCUSABLE)?.focus();
+    },
+    [place, layerRef, autoFocus],
+  );
+  React.useEffect(() => {
+    place();
+  }, [place]);
+  React.useEffect(() => {
+    window.addEventListener("scroll", place, true);
+    window.addEventListener("resize", place);
+    return () => {
+      window.removeEventListener("scroll", place, true);
+      window.removeEventListener("resize", place);
+    };
+  }, [place]);
+  return (
+    <Portal>
+      <div
+        ref={attach}
+        className={cx("tf-sidebar-layer", p.className)}
+        role={p.role}
+        aria-label={p.label}
+        aria-hidden={p.hidden || undefined}
+        onPointerEnter={p.onPointerEnter}
+        onPointerLeave={p.onPointerLeave}
+        onKeyDown={p.onKeyDown}
+      >
+        {p.children}
+      </div>
+    </Portal>
+  );
+}
+
+type Fly = { id: string; el: HTMLElement; kind: "tip" | "menu"; keyboard?: boolean };
+
 export function Sidebar(p: SidebarProps) {
   const t = useStrings(NAVIGATION_STRINGS);
-  const collapsed = useControlled(p.collapsed, !!p.defaultCollapsed, p.onCollapsedChange);
+  const phone = usePhone();
+  const collapsedState = useControlled(p.collapsed, !!p.defaultCollapsed, p.onCollapsedChange);
+  const aside = p.as === "aside";
+  const canCollapse = p.collapsible ?? !aside;
+  const collapsed = canCollapse && collapsedState[0] && !phone;
+  const setCollapsed = collapsedState[1];
+  const drawer = useControlled(p.mobileOpen, false, p.onMobileOpenChange);
+  const open = phone && drawer[0];
   const idOf = (it: { id?: string; label: string }) => it.id || it.label;
   const hasCurrent = (it: SidebarItem) =>
     idOf(it) === p.current || !!it.items?.some((c) => idOf(c) === p.current);
   const [expanded, setExpanded] = React.useState<string[]>(() =>
-    p.groups.flatMap((g) => g.items.filter((it) => it.items && hasCurrent(it)).map(idOf)),
+    p.groups.flatMap((g) => (g.items || []).filter((it) => it.items && hasCurrent(it)).map(idOf)),
+  );
+  const groupKey = (g: SidebarProps["groups"][number], i: number) => g.id || g.label || String(i);
+  const [shut, setShut] = React.useState<string[]>(() =>
+    p.groups.flatMap((g, i) => (g.collapsible && g.defaultOpen === false ? [groupKey(g, i)] : [])),
   );
+  const [fly, setFly] = React.useState<Fly | null>(null);
+  const [menuFor, setMenuFor] = React.useState<{ id: string; el: HTMLElement } | null>(null);
+  const flyRef = React.useRef<HTMLDivElement | null>(null);
+  const menuRef = React.useRef<HTMLDivElement | null>(null);
+  const navRef = React.useRef<HTMLElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const uid = useId("side");
+  const Link = (p.linkAs || "a") as React.ElementType;
+
+  // remember the collapsed state
+  const stored = React.useRef(false);
+  React.useEffect(() => {
+    if (!p.storageKey) return;
+    try {
+      const v = localStorage.getItem(p.storageKey);
+      if (v === "1" || v === "0") setCollapsed(v === "1");
+    } catch {
+      /* storage may be off */
+    }
+    stored.current = true;
+  }, [p.storageKey]);
+  React.useEffect(() => {
+    if (!p.storageKey || !stored.current) return;
+    try {
+      localStorage.setItem(p.storageKey, collapsedState[0] ? "1" : "0");
+    } catch {
+      /* storage may be off */
+    }
+  }, [collapsedState[0], p.storageKey]);
+
+  // ⌘B / Ctrl+B
+  React.useEffect(() => {
+    if (!p.shortcut) return;
+    const k = (e: KeyboardEvent) => {
+      if (
+        (e.metaKey || e.ctrlKey) &&
+        !e.altKey &&
+        e.key.toLowerCase() === "b" &&
+        !typing(e.target)
+      ) {
+        e.preventDefault();
+        if (phone) drawer[1](!drawer[0]);
+        else if (canCollapse) setCollapsed(!collapsedState[0]);
+      }
+    };
+    document.addEventListener("keydown", k);
+    return () => document.removeEventListener("keydown", k);
+  }, [p.shortcut, phone, drawer[0], collapsedState[0], canCollapse]);
+
+  // the drawer on phones: focus inside, Escape and Tab stay in it, focus returns to the button
+  React.useEffect(() => {
+    if (!open) return;
+    const nav = navRef.current;
+    nav?.querySelector<HTMLElement>(FOCUSABLE)?.focus();
+    const k = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        drawer[1](false);
+        toggleRef.current?.focus();
+      } else if (e.key === "Tab" && nav) {
+        const els = Array.from(nav.querySelectorAll<HTMLElement>(FOCUSABLE));
+        const a = els[0],
+          z = els[els.length - 1];
+        if (e.shiftKey && document.activeElement === a) {
+          e.preventDefault();
+          z?.focus();
+        } else if (!e.shiftKey && document.activeElement === z) {
+          e.preventDefault();
+          a?.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", k);
+    return () => document.removeEventListener("keydown", k);
+  }, [open]);
+
+  // flyouts close when collapsing ends, and on a click elsewhere
+  React.useEffect(() => {
+    if (!collapsed) setFly(null);
+  }, [collapsed]);
+  React.useEffect(() => {
+    if (!fly && !menuFor) return;
+    const down = (e: PointerEvent) => {
+      const n = e.target as Node;
+      if (fly && !fly.el.contains(n) && !flyRef.current?.contains(n)) setFly(null);
+      if (menuFor && !menuFor.el.contains(n) && !menuRef.current?.contains(n)) setMenuFor(null);
+    };
+    document.addEventListener("pointerdown", down);
+    return () => document.removeEventListener("pointerdown", down);
+  }, [fly, menuFor]);
+
+  const pick = (id: string) => {
+    p.onPick?.(id);
+    setFly(null);
+    if (open) drawer[1](false);
+  };
+  const later = (fn: () => void, ms: number) => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(fn, ms);
+  };
+
+  const inner = (
+    it: Omit<SidebarItem, "items"> & { items?: SidebarItem["items"] },
+    nested: boolean,
+  ) => (
+    <>
+      {!nested && it.icon && <Icon name={it.icon} />}
+      <span className="tf-sidebar-label">{it.label}</span>
+      {it.external && (
+        <>
+          <Icon name="arrowUpRight" size={14} className="tf-sidebar-ext" />
+          <span className="tf-sidebar-sr">{t.opensInNewTab}</span>
+        </>
+      )}
+      {it.badge === "dot" ? (
+        <span className="tf-sidebar-dot">
+          <span className="tf-sidebar-sr">{t.newActivity}</span>
+        </span>
+      ) : it.badge ? (
+        <span className="tf-sidebar-badge">{it.badge}</span>
+      ) : null}
+      {it.count ? <span className="tf-sidebar-count">{it.count}</span> : null}
+      {it.items && <Icon name="chevronDown" size={14} className="tf-sidebar-chev" />}
+    </>
+  );
+
+  /** A filter option: a checkbox, or a radio when the group picks one */
+  const option = (it: SidebarItem, gi: number, single: boolean) => {
+    const id = idOf(it);
+    return (
+      <li key={id} className="tf-sidebar-li">
+        <label className={cx("tf-sidebar-item", "tf-sidebar-option", it.disabled && "disabled")}>
+          <input
+            type={single ? "radio" : "checkbox"}
+            name={single ? `${uid}-r${gi}` : undefined}
+            className="tf-sidebar-input"
+            checked={!!it.checked}
+            disabled={it.disabled}
+            onChange={(e) => it.onCheckedChange?.(e.currentTarget.checked)}
+          />
+          <span className={cx("tf-sidebar-mark", single && "radio")} aria-hidden>
+            {!single && (
+              <svg
+                viewBox="0 0 24 24"
+                width={12}
+                height={12}
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={3}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M5 12.5l4.5 4.5L19 7.5" />
+              </svg>
+            )}
+          </span>
+          {it.icon && <Icon name={it.icon} />}
+          <span className="tf-sidebar-label">{it.label}</span>
+          {it.count !== undefined && <span className="tf-sidebar-count">{it.count}</span>}
+        </label>
+      </li>
+    );
+  };
+
   const row = (
     it: Omit<SidebarItem, "items"> & { items?: SidebarItem["items"] },
     nested = false,
@@ -375,69 +682,342 @@ export function Sidebar(p: SidebarProps) {
     const id = idOf(it);
     const isOpen = expanded.includes(id);
     const current = id === p.current;
-    return (
-      <li key={id}>
+    const parentCurrent = !!it.items && hasCurrent(it as SidebarItem);
+    const cls = cx(
+      "tf-sidebar-item",
+      nested && "nested",
+      parentCurrent && "has-current",
+      fly?.id === id && "flying",
+    );
+    const hover = collapsed && !nested;
+    const showFly = (el: HTMLElement, keyboard = false) =>
+      setFly({ id, el, kind: it.items ? "menu" : "tip", keyboard });
+    const itemProps = {
+      className: cls,
+      "aria-current": current ? ("page" as const) : undefined,
+      onFocus: hover
+        ? (e: React.FocusEvent<HTMLElement>) => {
+            if (!it.items) showFly(e.currentTarget);
+          }
+        : undefined,
+      onBlur: hover && !it.items ? () => setFly(null) : undefined,
+    };
+    let control: React.ReactNode;
+    if (it.items)
+      control = (
         <button
           type="button"
-          className={cx(
-            "tf-sidebar-item",
-            nested && "nested",
-            it.items && hasCurrent(it as SidebarItem) && "has-current",
-          )}
-          aria-current={current ? "page" : undefined}
-          aria-expanded={it.items ? isOpen : undefined}
-          aria-controls={it.items && isOpen && !collapsed[0] ? `${uid}-${id}` : undefined}
-          title={collapsed[0] ? it.label : undefined}
-          onClick={() => {
-            if (it.items && !collapsed[0])
-              setExpanded(isOpen ? expanded.filter((x) => x !== id) : expanded.concat(id));
-            else p.onPick?.(id);
+          {...itemProps}
+          aria-expanded={collapsed ? fly?.id === id : isOpen}
+          aria-controls={!collapsed && isOpen ? `${uid}-${id}` : undefined}
+          aria-haspopup={collapsed ? "true" : undefined}
+          disabled={it.disabled}
+          onClick={(e) => {
+            if (collapsed) {
+              if (fly?.id === id && fly.kind === "menu") setFly(null);
+              else showFly(e.currentTarget, e.detail === 0);
+            } else setExpanded(isOpen ? expanded.filter((x) => x !== id) : expanded.concat(id));
+          }}
+          onKeyDown={(e) => {
+            if (collapsed && e.key === "ArrowRight") {
+              e.preventDefault();
+              showFly(e.currentTarget, true);
+            }
           }}
         >
-          {!nested && <Icon name={it.icon} />}
-          <span className="tf-sidebar-label">{it.label}</span>
-          {it.count ? <span className="tf-subnav-count">{it.count}</span> : null}
-          {it.items && <Icon name="chevronDown" size={14} className="tf-sidebar-chev" />}
+          {inner(it, nested)}
         </button>
-        {it.items && isOpen && !collapsed[0] && (
+      );
+    else if (it.href && !it.disabled)
+      control = (
+        <Link
+          href={it.href}
+          {...itemProps}
+          {...(it.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+          onClick={() => pick(id)}
+        >
+          {inner(it, nested)}
+        </Link>
+      );
+    else
+      control = (
+        <button type="button" {...itemProps} disabled={it.disabled} onClick={() => pick(id)}>
+          {inner(it, nested)}
+        </button>
+      );
+    return (
+      <li
+        key={id}
+        className={cx("tf-sidebar-li", it.actions && !collapsed && "with-actions")}
+        onPointerEnter={
+          hover
+            ? (e) => {
+                const el = e.currentTarget.firstElementChild as HTMLElement;
+                later(() => setFly({ id, el, kind: it.items ? "menu" : "tip" }), 120);
+              }
+            : undefined
+        }
+        onPointerLeave={hover ? () => later(() => setFly(null), 160) : undefined}
+      >
+        {control}
+        {it.actions && !collapsed && (
+          <IconButton
+            icon="more"
+            label={t.moreActionsFor(it.label)}
+            variant="ghost"
+            size="sm"
+            className="tf-sidebar-more"
+            aria-haspopup="menu"
+            aria-expanded={menuFor?.id === id}
+            onClick={(e) =>
+              setMenuFor(menuFor?.id === id ? null : { id, el: e.currentTarget as HTMLElement })
+            }
+          />
+        )}
+        {it.items && isOpen && !collapsed && (
           <ul id={`${uid}-${id}`} className="tf-sidebar-sub">
             {it.items.map((c) => row(c, true))}
           </ul>
         )}
+        {menuFor?.id === id && it.actions && (
+          <SideLayer anchor={menuFor.el} place="below-end" layerRef={menuRef}>
+            <Menu
+              items={it.actions}
+              label={t.moreActionsFor(it.label)}
+              autoFocus
+              onClose={() => {
+                const el = menuFor.el;
+                setMenuFor(null);
+                el.focus();
+              }}
+            />
+          </SideLayer>
+        )}
       </li>
     );
   };
+
+  const flyItem = fly
+    ? p.groups.flatMap((g) => g.items || []).find((it) => idOf(it) === fly.id)
+    : undefined;
+  const state = { collapsed };
+  const header = typeof p.header === "function" ? p.header(state) : p.header;
+  const footer = typeof p.footer === "function" ? p.footer(state) : p.footer;
+  const variant = p.variant || "floating";
+  const Root = aside ? "aside" : "nav";
   return (
-    <nav
-      className={cx("tf-sidebar", collapsed[0] && "collapsed", p.className)}
-      style={p.style}
-      aria-label={p.label || t.sidebar}
-    >
-      {p.header && <div className="tf-sidebar-head">{p.header}</div>}
-      <div className="tf-sidebar-body">
-        {p.groups.map((g, gi) => (
-          <div key={g.label || gi} className="tf-sidebar-group">
-            {g.label && (
-              <div className="tf-sidebar-grouplabel" id={`${uid}-g${gi}`}>
-                {g.label}
-              </div>
-            )}
-            <ul aria-labelledby={g.label ? `${uid}-g${gi}` : undefined}>
-              {g.items.map((it) => row(it))}
-            </ul>
-          </div>
-        ))}
-      </div>
-      <div className="tf-sidebar-foot">
-        {p.footer}
+    <>
+      <div className={cx("tf-sidebar-bar", variant)}>
         <IconButton
-          icon={collapsed[0] ? "chevronRight" : "chevronLeft"}
-          label={collapsed[0] ? t.expandSidebar : t.collapseSidebar}
+          ref={toggleRef}
+          icon={aside ? "filter" : "menu"}
+          label={aside ? p.label || t.filters : open ? t.closeNavigation : t.openNavigation}
           variant="ghost"
-          size="sm"
-          onClick={() => collapsed[1](!collapsed[0])}
+          aria-expanded={open}
+          aria-controls={`${uid}-nav`}
+          onClick={() => drawer[1](!drawer[0])}
         />
+        {(typeof p.header === "function" ? p.header({ collapsed: false }) : p.header) || null}
       </div>
-    </nav>
+      {open && <div className="tf-sidebar-scrim" onClick={() => drawer[1](false)} />}
+      <Root
+        ref={navRef}
+        id={`${uid}-nav`}
+        className={cx(
+          "tf-sidebar",
+          variant !== "floating" && variant,
+          collapsed && "collapsed",
+          open && "open",
+          p.className,
+        )}
+        style={p.style}
+        aria-label={p.label || (aside ? t.filters : t.sidebar)}
+      >
+        {header && <div className="tf-sidebar-head">{header}</div>}
+        <div className="tf-sidebar-body">
+          {p.groups.map((g, gi) => {
+            const key = groupKey(g, gi);
+            const isShut = !collapsed && shut.includes(key);
+            const items = g.items || [];
+            const options = items.some((it) => it.checked !== undefined);
+            // filters and free content have no icons-only form
+            if (collapsed && (options || (g.content && !items.length))) return null;
+            return (
+              <div key={key} className="tf-sidebar-group">
+                {(g.label || g.action) && (
+                  <div className="tf-sidebar-grouphead">
+                    {g.label && g.collapsible ? (
+                      <button
+                        type="button"
+                        className="tf-sidebar-grouplabel"
+                        id={`${uid}-g${gi}`}
+                        aria-expanded={!isShut}
+                        aria-controls={`${uid}-gl${gi}`}
+                        onClick={() =>
+                          setShut(isShut ? shut.filter((x) => x !== key) : shut.concat(key))
+                        }
+                      >
+                        {g.label}
+                        <Icon name="chevronDown" size={12} className="tf-sidebar-chev" />
+                      </button>
+                    ) : g.label ? (
+                      <div className="tf-sidebar-grouplabel" id={`${uid}-g${gi}`}>
+                        {g.label}
+                      </div>
+                    ) : null}
+                    {g.action && !collapsed && (
+                      <IconButton
+                        icon={g.action.icon || "plus"}
+                        label={g.action.label}
+                        variant="ghost"
+                        size="sm"
+                        className="tf-sidebar-groupaction"
+                        onClick={g.action.onClick}
+                      />
+                    )}
+                  </div>
+                )}
+                {!isShut && (items.length > 0 || g.content) && (
+                  <div
+                    id={`${uid}-gl${gi}`}
+                    className="tf-sidebar-groupbody"
+                    role={options ? "group" : undefined}
+                    aria-labelledby={g.label ? `${uid}-g${gi}` : undefined}
+                  >
+                    {items.length > 0 && (
+                      <ul aria-labelledby={!options && g.label ? `${uid}-g${gi}` : undefined}>
+                        {items.map((it) =>
+                          it.checked !== undefined
+                            ? option(it, gi, g.select === "single")
+                            : row(it),
+                        )}
+                      </ul>
+                    )}
+                    {g.content && !collapsed && (
+                      <div className="tf-sidebar-content">{g.content}</div>
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+        <div className="tf-sidebar-foot">
+          {footer}
+          {canCollapse && (
+            <IconButton
+              icon={collapsed ? "chevronRight" : "chevronLeft"}
+              label={collapsed ? t.expandSidebar : t.collapseSidebar}
+              variant="ghost"
+              size="sm"
+              className="tf-sidebar-toggle"
+              aria-keyshortcuts={p.shortcut ? "Meta+B Control+B" : undefined}
+              onClick={() => setCollapsed(!collapsedState[0])}
+            />
+          )}
+        </div>
+      </Root>
+      {fly && flyItem && fly.kind === "tip" && (
+        <SideLayer anchor={fly.el} place="right" center className="tf-sidebar-tip" hidden>
+          {flyItem.label}
+          {flyItem.count ? <span className="tf-sidebar-tipcount">{flyItem.count}</span> : null}
+        </SideLayer>
+      )}
+      {fly && flyItem && fly.kind === "menu" && flyItem.items && (
+        <SideLayer
+          anchor={fly.el}
+          place="right"
+          className="tf-sidebar-flyout"
+          layerRef={flyRef}
+          autoFocus={fly.keyboard}
+          role="group"
+          label={flyItem.label}
+          onPointerEnter={() => clearTimeout(timer.current)}
+          onPointerLeave={() => !fly.keyboard && later(() => setFly(null), 160)}
+          onKeyDown={(e) => {
+            if (e.key === "Escape" || e.key === "ArrowLeft") {
+              e.preventDefault();
+              const el = fly.el;
+              setFly(null);
+              el.focus();
+            } else moveFocus(e, flyRef.current, "a, button");
+          }}
+        >
+          <div className="tf-sidebar-flytitle">{flyItem.label}</div>
+          <ul>
+            {flyItem.items.map((c) => {
+              const cid = idOf(c);
+              const cls = cx("tf-sidebar-item", "nested");
+              const cur = cid === p.current ? ("page" as const) : undefined;
+              return (
+                <li key={cid}>
+                  {c.href && !c.disabled ? (
+                    <Link
+                      href={c.href}
+                      className={cls}
+                      aria-current={cur}
+                      {...(c.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                      onClick={() => pick(cid)}
+                    >
+                      {inner(c, true)}
+                    </Link>
+                  ) : (
+                    <button
+                      type="button"
+                      className={cls}
+                      aria-current={cur}
+                      disabled={c.disabled}
+                      onClick={() => pick(cid)}
+                    >
+                      {inner(c, true)}
+                    </button>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        </SideLayer>
+      )}
+    </>
+  );
+}
+
+/** The signed-in person with their account menu (profile, settings, sign out). */
+export function UserMenu(p: UserMenuProps) {
+  const t = useStrings(NAVIGATION_STRINGS);
+  return (
+    <Popover
+      className={cx("tf-usermenu-wrap", p.className)}
+      width={240}
+      side={p.side || "top"}
+      block={!p.compact}
+      trigger={({ open, toggle }) => (
+        <button
+          type="button"
+          className={cx("tf-usermenu", p.compact && "compact")}
+          style={p.style}
+          aria-haspopup="menu"
+          aria-expanded={open}
+          onClick={toggle}
+        >
+          <span aria-hidden="true" className="tf-usermenu-avatar">
+            <Avatar name={p.name} src={p.avatar} size={32} />
+          </span>
+          {/* compact: the initials are decoration, the name is read out */}
+          {p.compact && <span className="tf-sidebar-sr">{`${t.account}: ${p.name}`}</span>}
+          {!p.compact && (
+            <>
+              <span className="tf-usermenu-text">
+                <span className="tf-usermenu-name">{p.name}</span>
+                {p.email && <span className="tf-usermenu-mail">{p.email}</span>}
+              </span>
+              <Icon name="chevronDown" size={14} />
+            </>
+          )}
+        </button>
+      )}
+    >
+      {({ close }) => <Menu label={t.account} autoFocus onClose={close} items={p.items || []} />}
+    </Popover>
   );
 }