Sidebar documental.

<nav class="ui-sample ui-sidebar-nav" data-sidebar-nav="true" aria-label="Documentación"><details><summary>Fundamentos</summary><a href="#color">Color</a><a href="#tipo">Tipografía</a></details><details open=""><summary>Componentes</summary><a href="#acciones" aria-current="page">Acciones</a><a href="#datos">Datos</a></details></nav>

<nav class="ui-sample ui-sidebar-nav border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center gap-3" data-sidebar-nav="true" aria-label="Documentación"><details><summary>Fundamentos</summary><a class="underline underline-offset-4" href="#color">Color</a><a class="underline underline-offset-4" href="#tipo">Tipografía</a></details><details open=""><summary>Componentes</summary><a class="underline underline-offset-4" href="#acciones" aria-current="page">Acciones</a><a class="underline underline-offset-4" href="#datos">Datos</a></details></nav>

export interface SidebarNavItem {
  label: string;
  href: string;
  /** Marca la página actual con `aria-current="page"`. */
  current?: boolean;
}

export interface SidebarNavGroup {
  /** Título del grupo, en el `<summary>`. */
  title: string;
  /** Muestra el grupo desplegado (atributo nativo `open` de `<details>`). */
  open?: boolean;
  items: SidebarNavItem[];
}

const GROUPS: SidebarNavGroup[] = [
  {
    title: "Fundamentos",
    items: [
      { label: "Color", href: "#color" },
      { label: "Tipografía", href: "#tipo" },
    ],
  },
  {
    title: "Componentes",
    open: true,
    items: [
      { label: "Acciones", href: "#acciones", current: true },
      { label: "Datos", href: "#datos" },
    ],
  },
];

export interface SidebarNavProps {
  /** Grupos plegables de enlaces, en orden. */
  groups?: SidebarNavGroup[];
  /** Nombre accesible de la navegación (`aria-label`). */
  label?: string;
  className?: string;
}

/**
 * Barra lateral de documentación: grupos plegables de enlaces a las páginas de un sitio documental, con la página actual marcada.
 *
 * Cada grupo es un `<details>` y abre sin JavaScript; pasa `open` en el grupo que contiene la página actual.
 *
 * @example <SidebarNav groups={[{ title: "Componentes", open: true, items: [{ label: "Acciones", href: "/acciones", current: true }] }]} />
 */
export function SidebarNav({ groups = GROUPS, label = "Documentación", className }: SidebarNavProps) {
  const visibles = groups.filter((group) => group.items.length);
  if (!visibles.length) return null;
  return (
    <nav className={["ui-sidebar-nav", className].filter(Boolean).join(" ")} data-sidebar-nav aria-label={label}>
      {visibles.map((group, i) => (
        <details key={i} open={group.open ?? false}>
          <summary>{group.title}</summary>
          {group.items.map((item, j) => (
            <a key={j} href={item.href} aria-current={item.current ? "page" : undefined}>{item.label}</a>
          ))}
        </details>
      ))}
    </nav>
  );
}