On PC and tablet, the left sidebar (Gladys menu) takes up space and reduces the useful display of widgets
Hi everyone!
This topic is now in development .
A PR has been opened to detach the left sidebar as a drawer on desktop:
master ← claude/sidebar-drawer-mode-uljznh
ouvert 06:07PM - 28 Aug 26 UTC
### Description
The docked 15rem rail costs every page a column of width, which… on a dashboard is width the widgets wanted. This adds the mobile drawer behaviour to desktop, as an opt-in.
**How it works**
- A chevron button in the rail's brand row (desktop only — below 992px the rail is a drawer whatever the preference says) **undocks** it. The rail then behaves exactly as it already does on mobile: off-canvas over a backdrop, opened on demand, closed by backdrop click, Escape or navigation. The same button, now pointing the other way, docks it back.
- The choice is a **per-device** `localStorage` preference (`sidebar-drawer-mode`), like dark mode and unlike anything account-scoped: the same user wants the rail docked on a wide screen and out of the way on a wall tablet. No server change, no API change.
- The desktop drawer is opened by a **floating frosted button** in the 3.25rem gutter the page keeps free on the left — not by a mobile-style top bar. A full-width bar would have cost every page a row (and vertical space is not what drawer mode is for), and would have forced every full-height page and sticky offset written against "no chrome above on desktop" to be re-derived. Nothing moves vertically, so those pages keep working untouched; the chat page's scene slide-back follows the same 3.25rem instead of 15rem.
- The button carries the same amber dot as the mobile burger when the instance-update notice is waiting in the closed drawer.
- Drive-by: the mobile burger gets the accessible name it never had (`header.openMenu`), added in the three languages along with the dock/undock labels.
Mobile is untouched: the drawer-mode button is hidden below the breakpoint and the top bar behaves exactly as before. The default stays the docked rail — nothing changes for anyone who does not press the button.
`docs/specs/dashboard-flexible-layout-and-widgets.md` § H2 (app navigation) is updated in the same diff, as the spec process requires.
**Verified in the running app** (Chromium, 1440×900 and 390×780):
- docked → body `gladys-sidebar-nav`, page `padding-left: 240px` (unchanged);
- undocked → body also carries `gladys-sidebar-drawer`, page `padding-left: 52px`, rail `visibility: hidden`;
- the floating opener shows the drawer, backdrop click and Escape close it, navigation closes it;
- the preference survives a reload, and re-docking restores the 240px rail;
- no horizontal overflow on the dashboard, Discussion, Intégrations, Appareils (incl. dark mode, where the button inverts with the theme) or the new-dashboard editor;
- the chat page still spans the full viewport in both modes (`x: 0, width: 1440`);
- at 390px wide the drawer-mode button is hidden and the mobile top bar is unchanged.
## Forum
Forum: https://community.gladysassistant.com/t/mettre-la-barre-laterale-gauche-en-mode-tiroir/10740
### Checklist
- [x] Tests pass: `cd server && npm run coverage` (Codecov requires 100% coverage on changed lines) and Cypress (`npm run cypress:run`) if the UI changed
- [x] Linter and prettier pass on both front and server (`npm run eslint`, `npm run prettier`)
- [x] No undocumented breaking change
Notes on the checklist: the change is front-only, so no server test or coverage is involved. `npm run prettier-check`, `npm run eslint`, `npm run compare-translations` and `npm run build` all pass in `front/`. Cypress could not be run here — its binary download is blocked in this environment — but no spec touches the header markup (`data-cy="sidebar-toggler"` and `sidebar-nav` are preserved), so CI's run is the check that matters.
Feel free to follow the PR, test (optional, especially for small requests) and give your feedback here if needed.
