Navegación lateral

El menú lateral de una aplicación, con el diseño del menú de AMSET: cada entrada es un icono en su baldosa con el nombre en versalitas y una línea que dice qué hay ahí; la página actual se enciende con el acento (degradado, filo, barra luminosa en el borde y la baldosa iluminada); los grupos se despliegan bajo su cabecera, y plegado queda la columna de baldosas con lo pendiente en un globo.

Cuándo usarlo

• Como menú principal de un panel de gestión, a la izquierda y siempre a la vista.
• description en un enlace o un grupo para la línea de debajo del nombre («Por preparar y enviados»): orienta a quien llega nuevo sin tener que entrar.
• Un grupo ({ key, label, icon, links: [...] } en lugar de href) para juntar pantallas hermanas bajo una cabecera que se despliega, como «Marketing» con sus campañas y sus cupones. Si la página actual está dentro, sale abierto.
• counter en un enlace para lo que espera a alguien (pedidos por preparar, facturas vencidas).
• collapsed cuando la pantalla necesita el ancho: quedan las baldosas, cada una con su nombre y su tooltip, y el contador sube a un globo con el número. Con onCollapsedChange el menú lleva su propio botón de plegar y desplegar en la cabecera; el estado lo sigue llevando quien lo monta.
• header y footer como función (({ collapsed }) => …) para pintar la marca entera abierto y solo su sello en baldosas. collapsed llega también en true en una pantalla estrecha, donde el menú se queda en baldosas él solo: así el nombre no sale recortado.
• onNavigate con enrutadores como Next o React Router: recibe la clave y el href del enlace pulsado y se llama en lugar de seguir el enlace (el clic del navegador se cancela). Con Ctrl, Cmd, Mayúsculas, Alt o el botón central el enlace se abre en otra pestaña o ventana, como cualquier otro, y onNavigate no se llama. Si la aplicación ya pone el RouterProvider de la biblioteca en la raíz, los enlaces navegan con él y onNavigate sobra.

Cuándo no

• Para los enlaces principales de una web pública, arriba y en horizontal: TopBar.
• Para la ruta hasta la pantalla actual: Breadcrumbs.
• Para el índice de una página larga: TableOfContents.

Teclado: Tab recorre los enlaces y las cabeceras de grupo en orden. Intro sigue un enlace (con onNavigate, Intro también lo lleva el enrutador); Intro o Espacio abren y cierran un grupo, y el siguiente Tab entra en sus enlaces. Un enlace con disabled no coge el foco y se anuncia como no disponible. Plegado, el tooltip con el nombre sale también al llegar con el teclado.

Accesibilidad: es un nav con nombre obligatorio (label), con listas de verdad y un h2 por título de sección. La página actual lleva aria-current="page" además del fondo y la barra; la cabecera del grupo que la contiene se marca, pero sin aria-current, que es solo del enlace. La cabecera de un grupo es un <button> con aria-expanded y aria-controls. La descripción se anuncia como descripción (aria-describedby), no dentro del nombre. El nombre de cada enlace lleva también su contador, con el número escrito en el idioma y en singular o plural («Pedidos 4 pendientes», «Avisos 1 pendiente»), abierto y plegado: plegado, la etiqueta queda oculta a la vista pero sigue siendo el nombre (sin aria-label, que taparía el contador), y los títulos de sección siguen ahí, ocultos. Los iconos son decorativos; sin icono, plegado enseña la inicial.

Aspecto fino: variables CSS --amset-nav-*: -accent (el color de todo el menú, por defecto el acento del tema), -background (y -fade-color, el mismo color liso, que tapa el resplandor de «queda menú debajo» al llegar al final), -width, -padding, -gap, -radius, -icon-box y -icon-size (la baldosa y su icono), -font y -description-font, y la letra del nombre: -label-transform (uppercase; none para quitar las versalitas), -label-spacing y -label-weight. El tamaño (size) mueve el ancho (13, 16 o 19 rem), la baldosa, el relleno, el hueco y el cuerpo de letra. Por debajo de 40rem de pantalla el menú se queda en baldosas aunque no lleve collapsed.