1.4 KiB
1.4 KiB
Sidebar Collapsible and Responsive
Obiettivo
Rendere il menu laterale (Sidebar) collassabile manualmente e automaticamente responsive (si chiude se la finestra si riduce).
Stato
Completato.
Modifiche Apportate
Frontend
-
src/frontend/src/components/Layout.tsx:- Aggiunto stato
isCollapsed. - Aggiunto hook
useMediaQueryper rilevare la larghezza dello schermo (mdbreakpoint). - Implementata logica
useEffectper collassare automaticamente la sidebar su schermi medi (trasmemd). - Aggiornato il calcolo della larghezza dinamica (
currentDrawerWidth) perAppBar,DrawereMain Content. - Aggiunta transizione CSS per un'animazione fluida.
- Aggiunto stato
-
src/frontend/src/components/Sidebar.tsx:- Aggiunto pulsante di toggle (freccia sinistra/destra) nell'header della sidebar.
- Implementata la modalità "collassata":
- Nasconde i testi (
ListItemText). - Nasconde le icone di espansione (
ExpandLess/ExpandMore). - Centra le icone (
ListItemIcon). - Aggiunge
Tooltipal passaggio del mouse per mostrare l'etichetta del menu.
- Nasconde i testi (
- Gestione click in modalità collassata: se si clicca una voce con sottomenu, la sidebar si espande automaticamente e apre il sottomenu.
Verifica
- Testato il toggle manuale.
- Testato il comportamento responsive (simulato tramite logica breakpoint).
- Verificato che i tooltip appaiano correttamente in modalità collassata.