Floating navigation

import type { ReactNode } from "react";

export interface NavLink {
  label: string;
  href: string;
  /** Pages under this one. With these the link opens a panel when pointed at or focused. */
  items?: { title: string; line: string; href: string }[];
}

export interface FloatingNavProps {
  brand: ReactNode;
  links: NavLink[];
  action?: { label: string; href: string };
  /** A quieter link before the button, such as signing in. */
  aside?: { label: string; href: string };
  /** The label of a link whose panel is held open. For showing it, not for use on a page. */
  open?: string;
  className?: string;
}

const link = "inline-flex h-9 items-center gap-1 rounded-full px-3.5 text-[14px] font-medium whitespace-nowrap text-(--tui-floating-nav-muted) no-underline transition-colors duration-(--tui-duration) hover:bg-(--tui-floating-nav-hover) hover:text-(--tui-floating-nav-fg)";

/**
 * A navigation bar as a capsule that floats over the top of the page. What
 * is behind it shows through, out of focus, so it reads on any background.
 * A link with pages under it opens a panel of them, by pointer or keyboard,
 * without a line of script.
 */
export function FloatingNav({ brand, links, action, aside, open, className }: FloatingNavProps) {
  return (
    <header data-slot="floating-nav" className={["relative z-10 flex w-full justify-center px-4 py-(--tui-floating-nav-offset) font-(family-name:--tui-font)", className].filter(Boolean).join(" ")}>
      <nav
        aria-label="Main"
        className="flex h-(--tui-floating-nav-height) max-w-full items-center gap-(--tui-floating-nav-gap) rounded-(--tui-floating-nav-radius) bg-(--tui-floating-nav-bg) pr-[calc((var(--tui-floating-nav-height)_-_var(--tui-floating-nav-action-height))_/_2)] pl-(--tui-floating-nav-padding-x) text-(--tui-floating-nav-fg) backdrop-blur-(--tui-floating-nav-blur) [box-shadow:inset_0_0_0_var(--tui-floating-nav-border-width)_var(--tui-floating-nav-border),inset_0_1px_0_rgb(255_255_255_/_0.5),var(--tui-floating-nav-shadow)]"
      >
        <span data-slot="floating-nav-brand" className="mr-3 flex items-center gap-2.5 text-[15px] font-semibold tracking-[-0.01em] whitespace-nowrap">
          <span aria-hidden className="size-5 rounded-[7px] bg-(--tui-floating-nav-accent) [background-image:linear-gradient(135deg,rgb(255_255_255_/_0.35),transparent_60%)]" />
          {brand}
        </span>
        <ul className="m-0 flex list-none items-center gap-0.5 p-0 max-md:hidden">
          {links.map((item) =>
            item.items?.length ? (
              <li key={item.label} className="group/menu relative" data-open={open === item.label || undefined}>
                <a href={item.href} aria-haspopup="true" className={link}>
                  {item.label}
                  <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="size-3.5 opacity-60 transition-transform duration-200 group-hover/menu:rotate-180 group-data-open/menu:rotate-180">
                    <path d="M4 6l4 4 4-4" />
                  </svg>
                </a>
                <div className="invisible absolute top-full left-1/2 -translate-x-1/2 translate-y-1 pt-3 opacity-0 transition-[opacity,translate,visibility] duration-200 group-focus-within/menu:visible group-focus-within/menu:translate-y-0 group-focus-within/menu:opacity-100 group-hover/menu:visible group-hover/menu:translate-y-0 group-hover/menu:opacity-100 group-data-open/menu:visible group-data-open/menu:translate-y-0 group-data-open/menu:opacity-100">
                  <ul data-slot="floating-nav-panel" className="m-0 grid w-[30rem] max-w-[90vw] list-none grid-cols-2 gap-1 rounded-[calc(var(--tui-floating-nav-radius)_*_0.6)] bg-(--tui-floating-nav-panel-bg) p-2 [box-shadow:inset_0_0_0_1px_var(--tui-floating-nav-border),var(--tui-floating-nav-panel-shadow)]">
                    {item.items.map((sub, i) => (
                      <li key={sub.title}>
                        <a href={sub.href} className="flex items-start gap-3 rounded-[calc(var(--tui-floating-nav-radius)_*_0.4)] p-3 no-underline transition-colors duration-(--tui-duration) hover:bg-(--tui-floating-nav-hover)">
                          <span aria-hidden className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-(--tui-floating-nav-hover) text-[12px] font-semibold text-(--tui-floating-nav-accent) tabular-nums">
                            {String(i + 1).padStart(2, "0")}
                          </span>
                          <span className="flex min-w-0 flex-col gap-0.5">
                            <span className="text-[14px] font-semibold text-(--tui-floating-nav-fg)">{sub.title}</span>
                            <span className="text-[13px] leading-snug text-(--tui-floating-nav-muted)">{sub.line}</span>
                          </span>
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
              </li>
            ) : (
              <li key={item.label}>
                <a href={item.href} className={link}>
                  {item.label}
                </a>
              </li>
            ),
          )}
        </ul>
        <span className="ml-3 flex items-center gap-1">
          {aside && (
            <a href={aside.href} className={`${link} max-sm:hidden`}>
              {aside.label}
            </a>
          )}
          {action && (
            <a
              href={action.href}
              data-slot="floating-nav-action"
              className="inline-flex h-(--tui-floating-nav-action-height) items-center rounded-[calc(var(--tui-floating-nav-radius)_-_4px)] bg-(--tui-floating-nav-accent) px-4 text-[14px] font-semibold whitespace-nowrap text-(--tui-floating-nav-accent-fg) no-underline transition-[filter,scale] duration-(--tui-duration) [background-image:linear-gradient(to_bottom,rgb(255_255_255_/_0.18),rgb(255_255_255_/_0)_55%,rgb(0_0_0_/_0.14))] [box-shadow:inset_0_1px_0_rgb(255_255_255_/_0.24),inset_0_-1px_0_rgb(0_0_0_/_0.2),0_6px_14px_-8px_var(--tui-floating-nav-accent)] hover:brightness-110 active:scale-[0.97]"
            >
              {action.label}
            </a>
          )}
        </span>
      </nav>
    </header>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Floating navigation */
  --tui-floating-nav-height: calc(var(--tui-space) * 14);
  --tui-floating-nav-action-height: calc(var(--tui-space) * 10);
  --tui-floating-nav-padding-x: calc(var(--tui-space) * 5);
  --tui-floating-nav-gap: calc(var(--tui-space) * 2);
  --tui-floating-nav-offset: calc(var(--tui-space) * 4);
  --tui-floating-nav-radius: calc(var(--tui-radius) * 4);
  --tui-floating-nav-border-width: var(--tui-border-width);
  --tui-floating-nav-blur: 14px;
  --tui-floating-nav-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  --tui-floating-nav-bg: color-mix(in srgb, var(--tui-bg) 78%, transparent);
  --tui-floating-nav-fg: var(--tui-fg);
  --tui-floating-nav-muted: var(--tui-muted-fg);
  --tui-floating-nav-border: var(--tui-border);
  --tui-floating-nav-hover: var(--tui-muted);
  --tui-floating-nav-accent: var(--tui-primary);
  --tui-floating-nav-accent-fg: var(--tui-primary-fg);
  --tui-floating-nav-panel-bg: var(--tui-bg);
  --tui-floating-nav-panel-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}