Drommo
Componente · Navegación

Rail de Dashboard Esmeralda

Prompt

Crea un componente de navegación «Rail de Dashboard Esmeralda» listo para producción usando React, Next.js, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa un patrón rail con orientación vertical, color principal #ef4444, secundario #f472b6 y fondo #fff1f2. Incluye datos tipados, ruta activa, elementos anidados, badges, iconos, opciones deshabilitadas, navegación por teclado y comportamiento responsive. Implementa disclosure con aria-expanded y aria-controls, landmarks nav semánticos, roving tabindex cuando corresponda, Escape, clic exterior, restauración del foco, objetivos táctiles de 44px y contraste WCAG AA. Evita menús disponibles solo en hover y links/botones anidados inválidos. Soporta carga, permisos, vacío y estado colapsado. Anima transform/opacity, respeta movimiento reducido y evita layout shift. Devuelve código, demo, dependencias, integración de rutas y pruebas.

Tipo
Componente · Navegación
Tecnología
React, Next.js, TypeScript, Tailwind CSS
  • Navigation
  • rail
  • vertical
  • Accessible
  • App
Crear en Drommo

«Crear en Drommo» abre un chat en el modo correcto con el prompt ya escrito. No se envía hasta que tú lo mandes.

Ideas parecidas