feat: Implement collapsible and responsive sidebar with icon-only view and toggle functionality.

This commit is contained in:
2025-12-06 01:04:42 +01:00
parent 4c72030687
commit 4db05100cf
4 changed files with 121 additions and 41 deletions

View File

@@ -36,3 +36,5 @@ File riassuntivo dello stato di sviluppo di Zentral.
- Rimozione tab interne e header dal modulo Magazzino per uniformità con la UI principale.
- [2025-12-05 Live Data Alignment](./devlog/2025-12-05-230000_live_data_alignment.md) - **Completato**
- Implementazione `SchemaDiscoveryService` per allineamento automatico dataset report con strutture dati live.
- [2025-12-06 Sidebar Collapsible](./devlog/2025-12-06-010500_sidebar_collapsible.md) - **Completato**
- Reso il menu laterale collassabile (manuale e responsive) con visualizzazione a sole icone.

View File

@@ -0,0 +1,30 @@
# 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.