Capsule Navbar

"use client";

import { CaretDownIcon, ListIcon, XIcon } from "@phosphor-icons/react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useEffect, useId, useRef, useState, type ReactNode } from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export type CapsuleNavLink = { label: string; href: string };
export type CapsuleNavMenuLink = CapsuleNavLink & {
  /** A small chip beside the label, e.g. "New". */
  badge?: string;
  /** Shown in a tilted tile while the link is hovered or focused, e.g. an image. */
  preview?: ReactNode;
};
export type CapsuleNavMenu = { label: string; items: CapsuleNavMenuLink[] };
export type CapsuleNavItem = CapsuleNavLink | CapsuleNavMenu;

const isMenu = (item: CapsuleNavItem): item is CapsuleNavMenu => "items" in item;

const EASE = [0.23, 1, 0.32, 1] as const;
const CLOSE_DELAY = 140;

// The card hangs from a pivot above the top-right corner and rests at a tilt.
const TILT = -6;
const SWING = { type: "spring", duration: 0.7, bounce: 0.25 } as const;
const SWING_OUT = { duration: 0.35, ease: [0.5, 0, 0.75, 0] } as const;
const PREVIEW_TILTS = [5, -4, 7, -6, 3];
// Set --capsule-scrim on the header to wash the page with another colour.
const SCRIM =
  "0 0 0 200vmax var(--capsule-scrim, color-mix(in oklab, var(--background) 55%, transparent))";

const LINK_CLASS =
  "flex h-10 items-center rounded-xl px-3 text-sm font-medium outline-none transition-colors duration-150 hover:bg-muted focus-visible:bg-muted focus-visible:ring-[1.5px] focus-visible:ring-ring/60";

/**
 * The capsule of links. An item with children swings a large, dark, tilted card
 * down behind the header, with its links set big and an optional preview tile.
 */
export function CapsuleNavLinks({
  items,
  className,
}: {
  items: CapsuleNavItem[];
  className?: string;
}) {
  const rootRef = useRef<HTMLDivElement>(null);
  const triggerRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const closeTimer = useRef<number | undefined>(undefined);
  // A hover has already opened the panel, so the click that follows keeps it.
  const openedByHover = useRef(false);
  const [open, setOpen] = useState<number | null>(null);
  const baseId = useId();

  const cancelClose = () => window.clearTimeout(closeTimer.current);

  const leave = () => {
    cancelClose();
    closeTimer.current = window.setTimeout(() => setOpen(null), CLOSE_DELAY);
  };

  // Outside press and Escape close the panel.
  useEffect(() => {
    if (open === null) return;
    const onPointerDown = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpen(null);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key !== "Escape") return;
      setOpen(null);
      triggerRefs.current[open]?.focus();
    };
    document.addEventListener("pointerdown", onPointerDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("pointerdown", onPointerDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  useEffect(() => () => window.clearTimeout(closeTimer.current), []);

  const itemClass =
    "relative inline-flex h-8 items-center gap-1 rounded-full px-3 text-sm font-medium whitespace-nowrap text-muted-foreground outline-none transition-colors duration-150 after:absolute after:inset-x-0 after:-inset-y-1 hover:bg-foreground/[0.06] hover:text-foreground focus-visible:ring-[1.5px] focus-visible:ring-ring/60 aria-expanded:bg-foreground/[0.06] aria-expanded:text-foreground dark:hover:bg-foreground/10 dark:aria-expanded:bg-foreground/10";

  return (
    <div
      ref={rootRef}
      data-capsule-open={open !== null ? "" : undefined}
      className={className}
      onPointerEnter={cancelClose}
      onPointerLeave={leave}
      onBlur={(e) => {
        if (!rootRef.current?.contains(e.relatedTarget as Node)) setOpen(null);
      }}
    >
      <ul className="flex h-10 items-center rounded-full bg-card px-1 text-card-foreground shadow-(--custom-shadow)">
        {items.map((item, index) => {
          if (!isMenu(item)) {
            return (
              <li key={item.label}>
                <a
                  href={item.href}
                  className={itemClass}
                  onPointerEnter={(e) => {
                    if (e.pointerType === "mouse") setOpen(null);
                  }}
                  onFocus={() => setOpen(null)}
                >
                  {item.label}
                </a>
              </li>
            );
          }

          const isOpen = open === index;
          return (
            <li key={item.label}>
              <button
                ref={(el) => {
                  triggerRefs.current[index] = el;
                }}
                type="button"
                aria-expanded={isOpen}
                aria-controls={`${baseId}-menu-${index}`}
                className={cn(itemClass, "cursor-pointer pr-2.5")}
                onPointerEnter={(e) => {
                  if (e.pointerType !== "mouse") return;
                  cancelClose();
                  openedByHover.current = !isOpen;
                  setOpen(index);
                }}
                onFocus={() => setOpen((o) => (o === index ? o : null))}
                onClick={() => {
                  if (openedByHover.current && isOpen) {
                    openedByHover.current = false;
                    return;
                  }
                  setOpen(isOpen ? null : index);
                }}
                onKeyDown={(e) => {
                  if (e.key !== "ArrowDown") return;
                  e.preventDefault();
                  setOpen(index);
                  requestAnimationFrame(() =>
                    document
                      .getElementById(`${baseId}-menu-${index}`)
                      ?.querySelector("a")
                      ?.focus(),
                  );
                }}
              >
                {item.label}
                <CaretDownIcon
                  weight="bold"
                  className={cn(
                    "size-3 opacity-60 transition-transform duration-200 ease-snappy motion-reduce:transition-none",
                    isOpen && "rotate-180",
                  )}
                />
              </button>
            </li>
          );
        })}
      </ul>

      {/* Sits behind the header row. The clip trims the cards at the top and
          sides of the header and lets them hang below it; clipping the x axis
          as overflow too keeps the off-screen part from adding sideways scroll. */}
      <div className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-0 overflow-x-clip [clip-path:inset(0_0_-9999px_0)]">
        <AnimatePresence>
          {open !== null && (
            // A zero-size box whose shadow washes out the page without adding scroll.
            <motion.div
              aria-hidden="true"
              className="absolute top-0 left-0 size-0"
              style={{ boxShadow: SCRIM }}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.25 }}
            />
          )}
        </AnimatePresence>
        {items.map(
          (item, index) =>
            isMenu(item) && (
              <AnimatePresence key={item.label}>
                {open === index && (
                  <MenuCard
                    id={`${baseId}-menu-${index}`}
                    items={item.items}
                    onNavigate={() => setOpen(null)}
                  />
                )}
              </AnimatePresence>
            ),
        )}
      </div>
    </div>
  );
}

function MenuCard({
  id,
  items,
  onNavigate,
}: {
  id: string;
  items: CapsuleNavMenuLink[];
  onNavigate: () => void;
}) {
  const reduceMotion = useReducedMotion();
  const [active, setActive] = useState<number | null>(null);
  const hasPreviews = items.some((item) => item.preview);
  const preview = active === null ? null : items[active].preview;

  return (
    // The negative offsets and the matching padding keep the card's top and
    // right edges off screen, so the tilt never shows a gap.
    <motion.div
      id={id}
      className="pointer-events-auto absolute -top-32 -right-24 w-max origin-top-right rounded-[2rem] bg-primary pt-58 pr-44 pb-12 pl-12 text-primary-foreground shadow-(--custom-shadow-primary) dark:bg-secondary dark:text-secondary-foreground dark:shadow-(--custom-shadow)"
      initial={reduceMotion ? { opacity: 0, rotate: TILT } : { rotate: 24, y: "-100%" }}
      animate={{ opacity: 1, rotate: TILT, y: 0 }}
      exit={reduceMotion ? { opacity: 0 } : { rotate: 14, y: "-110%", transition: SWING_OUT }}
      transition={reduceMotion ? { duration: 0.15 } : SWING}
    >
      <div className="flex items-center gap-10">
        <ul className="group/list flex flex-col">
          {items.map((item, index) => (
            <li key={item.label}>
              <a
                href={item.href}
                onClick={onNavigate}
                onPointerEnter={() => setActive(index)}
                onFocus={() => setActive(index)}
                className="flex items-center gap-3 rounded-lg py-1.5 text-2xl leading-none font-medium tracking-tight outline-none transition-opacity duration-200 group-hover/list:opacity-50 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-[1.5px] focus-visible:ring-white/30 @5xl:text-3xl"
              >
                {item.label}
                {item.badge && (
                  <span className="rounded-full bg-white/10 px-2 py-1 text-xs leading-none tracking-normal opacity-80">
                    {item.badge}
                  </span>
                )}
              </a>
            </li>
          ))}
        </ul>
        {hasPreviews && (
          <div aria-hidden="true" className="relative hidden aspect-4/5 w-36 @4xl:block">
            <AnimatePresence>
              {preview && active !== null && (
                <motion.div
                  key={active}
                  className="absolute inset-0 overflow-hidden rounded-2xl bg-white/8 ring-1 ring-white/10 ring-inset"
                  initial={
                    reduceMotion
                      ? { opacity: 0 }
                      : { opacity: 0, scale: 0.94, rotate: PREVIEW_TILTS[active % 5] + 10 }
                  }
                  animate={{ opacity: 1, scale: 1, rotate: PREVIEW_TILTS[active % 5] }}
                  exit={{ opacity: 0, transition: { duration: 0.15, delay: 0.1 } }}
                  transition={{ duration: 0.3, ease: EASE }}
                >
                  {preview}
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        )}
      </div>
    </motion.div>
  );
}

/** The round menu button shown when the container is too narrow for the links. */
export function CapsuleNavMobileMenu({
  items,
  className,
}: {
  items: CapsuleNavItem[];
  className?: string;
}) {
  const reduceMotion = useReducedMotion();
  const [open, setOpen] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const panelId = useId();

  useEffect(() => {
    if (!open) return;
    const onPointerDown = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key !== "Escape") return;
      setOpen(false);
      buttonRef.current?.focus();
    };
    document.addEventListener("pointerdown", onPointerDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("pointerdown", onPointerDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const close = () => setOpen(false);
  const iconClass =
    "absolute size-4.5 transition-[opacity,scale] duration-200 ease-snappy motion-reduce:transition-none";

  return (
    <div ref={rootRef} className={className}>
      <Button
        ref={buttonRef}
        variant="outline"
        size="icon-lg"
        aria-label={open ? "Close menu" : "Open menu"}
        aria-expanded={open}
        aria-controls={panelId}
        onClick={() => setOpen((o) => !o)}
        className="relative text-foreground"
      >
        <ListIcon className={cn(iconClass, open ? "scale-75 opacity-0" : "scale-100 opacity-100")} />
        <XIcon className={cn(iconClass, open ? "scale-100 opacity-100" : "scale-75 opacity-0")} />
      </Button>
      <AnimatePresence>
        {open && (
          <motion.nav
            id={panelId}
            aria-label="Main"
            className="absolute inset-x-4 top-full z-20 -mt-1 origin-top-right rounded-[20px] bg-card p-1.5 text-card-foreground shadow-(--custom-shadow)"
            initial={reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: -4 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.98, y: -4 }}
            transition={{ duration: 0.2, ease: EASE }}
          >
            <ul className="flex flex-col">
              {items.map((item): ReactNode =>
                isMenu(item) ? (
                  <li key={item.label} className="pt-2 not-first:mt-1 not-first:border-t not-first:border-border">
                    <p className="px-3 pb-1 text-xs font-medium text-muted-foreground">
                      {item.label}
                    </p>
                    <ul>
                      {item.items.map((sub) => (
                        <li key={sub.label}>
                          <a href={sub.href} onClick={close} className={LINK_CLASS}>
                            {sub.label}
                          </a>
                        </li>
                      ))}
                    </ul>
                  </li>
                ) : (
                  <li key={item.label} className="not-first:mt-1 not-first:border-t not-first:border-border not-first:pt-1">
                    <a href={item.href} onClick={close} className={LINK_CLASS}>
                      {item.label}
                    </a>
                  </li>
                ),
              )}
            </ul>
          </motion.nav>
        )}
      </AnimatePresence>
    </div>
  );
}