Mejora UX post-refactor (PR #61): las 4 secciones del sidebar expandido son
ahora colapsables individualmente, y el modo colapsado reemplaza la lista
larga de iconos por un icono por grupo con fly-out panel on hover.
Expandido (240px):
- Click en header de sección (Seguridad/Maestros/Catálogo/Tasación) toggle
collapse con chevron que rota.
- Default: todas colapsadas EXCEPTO la que contiene la ruta activa
(auto-expand override).
- Sección activa tiene el header disabled + sin chevron (no se puede colapsar
mientras estás ahí — evita esconder items de la ruta actual).
- Preferencia per-sección persistida en localStorage.
Colapsado (68px):
- Un icono por grupo en lugar de listar TODOS los items (evitando scroll
largo en usuarios con muchos permisos).
- Hover sobre el grupo despliega un fly-out panel al lado derecho con el
título del grupo + sus items clickeables.
- Grupo que contiene la ruta activa tiene un dot indicator.
- Icons de grupo: ShieldCheck (Seguridad), Building2 (Maestros),
Package (Catálogo), Calculator (Tasación).
Accessibility:
- Headers expandidos: aria-expanded refleja estado.
- Fly-out: aria-haspopup='menu' + role='menu' + keyboard focus.
z-index management (pedido explícito del user):
- aside wrapper en ProtectedLayout: z-10 -> z-30 (sobre contenido).
- HoverCardContent del fly-out: z-[60] (sobre cualquier overlay app-level,
excepto modal dialogs que siguen siendo z-50 por convención Radix).
- hover-card.tsx: envuelto en HoverCardPrimitive.Portal (faltaba en el
shadcn generated) — previene que el fly-out quede cortado por overflow
del aside.
Dependencies:
- shadcn hover-card agregado via 'npx shadcn@latest add' (+ @radix-ui/react-hover-card).
Tests:
- 16 tests (antes 10) — agregados 6 casos: default collapsed except active,
click toggle expand/collapse, aria-expanded reflection, disabled header
when active, root route collapses all, localStorage persistence.
