# 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 `useMediaQuery` per rilevare la larghezza dello schermo (`md` breakpoint). - Implementata logica `useEffect` per collassare automaticamente la sidebar su schermi medi (tra `sm` e `md`). - Aggiornato il calcolo della larghezza dinamica (`currentDrawerWidth`) per `AppBar`, `Drawer` e `Main Content`. - Aggiunta transizione CSS per un'animazione fluida. - **`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 `Tooltip` al passaggio del mouse per mostrare l'etichetta del menu. - 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.