mercadodevida/work/artifacts/F-159/architect.md

F-159 — Diseño

Arquitectura

El estado vive en DashboardShell, única composición del layout autenticado:

• desktopCollapsed: preferencia persistida en localStorage bajo mdv.admin.sidebar.collapsed.
• mobileOpen: estado efímero del drawer.

Sidebar y NavItemRow siguen consumiendo la misma lista visibleNavItems(role). No se crean menús alternativos.

Responsive

• Sidebar base: drawer fixed, 240px y desplazado fuera de viewport cuando está cerrado.
• lg+: pasa a sticky, siempre visible, ancho 240px/80px según preferencia.
• Etiquetas usan lg:hidden solo durante collapse, por lo que el drawer móvil siempre conserva texto.
• Backdrop solo se renderiza con drawer abierto.

Accesibilidad

• Toggle es <button> nativo con aria-expanded, aria-controls y etiqueta dinámica.
• Escape cierra drawer.
• Drawer móvil cerrado usa invisible para excluir enlaces del foco.
• Enlaces tienen aria-label; modo icon-only añade title.

Transiciones

transition-[width,transform] duration-300 ease-in-out, respetando las utilidades existentes de Tailwind.