Menú móvil.

<details class="ui-sample ui-mobile-menu" data-mobile-menu><summary>Menú</summary><nav aria-label="Navegación móvil"><a aria-current="page" href="#inicio">Inicio</a><a href="#productos">Productos</a><a href="#documentacion">Documentación</a><a href="#cuenta">Cuenta</a></nav></details>

<details class="ui-sample ui-mobile-menu border border-slate-300 bg-white p-4 text-slate-950" data-mobile-menu><summary>Menú</summary><nav class="flex flex-wrap items-center gap-3" aria-label="Navegación móvil"><a class="underline underline-offset-4" aria-current="page" href="#inicio">Inicio</a><a class="underline underline-offset-4" href="#productos">Productos</a><a class="underline underline-offset-4" href="#documentacion">Documentación</a><a class="underline underline-offset-4" href="#cuenta">Cuenta</a></nav></details>

import type { ReactEventHandler } from "react";

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

const ITEMS: MobileMenuItem[] = [
  { label: "Inicio", href: "#inicio", current: true },
  { label: "Productos", href: "#productos" },
  { label: "Documentación", href: "#documentacion" },
  { label: "Cuenta", href: "#cuenta" },
];

export interface MobileMenuProps {
  /** Enlaces del menú, en orden; uno con `current`. */
  items?: MobileMenuItem[];
  /** Muestra el menú desplegado (atributo nativo `open` de `<details>`). */
  open?: boolean;
  /** Se llama al abrir o cerrar el menú. */
  onToggle?: ReactEventHandler<HTMLDetailsElement>;
  /** Texto del control que abre y cierra el menú. */
  triggerLabel?: string;
  /** Nombre accesible de la navegación (`aria-label`). */
  label?: string;
  className?: string;
}

/**
 * Menú móvil plegable con los enlaces del sitio; reemplaza a la navegación principal en pantallas angostas.
 *
 * Usa `<details>`: abre y cierra sin JavaScript; `open` lo muestra desplegado y `onToggle` avisa cada cambio.
 *
 * @example <MobileMenu items={[{ label: "Inicio", href: "/", current: true }, { label: "Cuenta", href: "/cuenta" }]} />
 * @example <MobileMenu open={abierto} onToggle={alternar} />
 */
export function MobileMenu({
  items = ITEMS,
  open = false,
  onToggle,
  triggerLabel = "Menú",
  label = "Navegación móvil",
  className,
}: MobileMenuProps) {
  if (!items.length) return null;
  return (
    <details className={["ui-mobile-menu", className].filter(Boolean).join(" ")} data-mobile-menu open={open} onToggle={onToggle}>
      <summary>{triggerLabel}</summary>
      <nav aria-label={label}>
        {items.map((item, i) => (
          <a key={i} href={item.href} aria-current={item.current ? "page" : undefined}>{item.label}</a>
        ))}
      </nav>
    </details>
  );
}