Drommo
Componente · Navegación

Drawer Móvil Coral

Prompt

Crea un componente de navegación «Drawer Móvil Coral» listo para producción usando React, Next.js, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Usa un patrón drawer con orientación responsive, color principal #6366f1, secundario #22d3ee y fondo #080b1c. 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
  • drawer
  • responsive
  • Responsive
  • 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

Navegación

Dock IA Violeta