Auf dem PC und dem Tablet nimmt die linke Seitenleiste (Gladys-Menü) viel Platz ein und verringert die nutzbare Anzeige der Widgets
Hallo zusammen!
Dieses Thema ist nun in Entwicklung .
Ein Pull Request wurde erstellt, um die linke Seitenleiste auf Desktop als Schublade ausklappbar zu machen:
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 makes the rail **collapsible** on desktop, as a per-device opt-in.
**How it works**
- A chevron button in the rail's **footer**, beside the dark-mode toggle (desktop only — below 992px the rail is an on-demand drawer whatever the preference says), **collapses** it: the rail slides off-canvas, the page takes the width back, and a floating frosted button in the freed 3.25rem gutter **expands** it back into the same docked rail.
- **Both are resting states — neither is an overlay.** Expanded is exactly the rail as it exists today: docked beside the content, nothing dimmed, staying open across navigation. (A first iteration reused the mobile drawer on desktop — open meant "over a backdrop with the page dimmed" — which lost the *rail open while working* state; field feedback rightly called that a regression, so the overlay grammar — backdrop, Escape, close-on-navigation — stays mobile-only.)
- **The control is in the footer, not the brand row.** A second iteration put it next to the logo and ellipsised the brand into "Gladys Assi…": at 15rem the rail has 216px of usable width and "Gladys Assistant" alone needs 129px beside a 50px logo lockup, so there is simply no room — and the ~44px coarse-pointer target (wall tablets, this feature's audience) made it worse. The footer is where the other view toggle already lives and where the profile name is designed to ellipsise. The brand row is now byte-for-byte master's.
- The choice is a **per-device** `localStorage` preference (`sidebar-collapsed`), like dark mode and unlike anything account-scoped: the same user wants the rail expanded on a wide screen and out of the way on a wall tablet. No server change, no API change.
- The expand control is a floating button, not a mobile-style top bar: a full-width bar would have cost every page a row, 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; the 0.22s rail slide gets a matching `padding-left` transition on the page so content and rail move as one. The button carries the mobile burger's amber dot when the instance-update notice or a payment-required subscription is waiting in the hidden rail.
- Collapsing also closes the profile dropup, whose container the button sits inside (the click-outside handler never sees it).
- **Keyboard**: each toggle takes away the control that was just pressed, so focus moves to whichever control takes over — the floating button when collapsing, the footer chevron when expanding — and only on a real change, so a rail that starts collapsed never steals focus from the page just opened.
- Includes the review passes' a11y fixes: ~44px coarse-pointer targets and `:focus-visible` rings on both rail controls, the mobile burger's open/close accessible name (it never had one), Escape closing the profile dropup before the mobile drawer via a dedicated close action.
Mobile is untouched; the default stays the expanded 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, fine and coarse pointer):
- the brand name is **untruncated** at both pointer types (`scrollWidth == clientWidth`, 129px), with the collapse button at 32px / 44px respectively;
- expanded → `padding-left: 240px`, rail visible, **no backdrop**;
- collapse → `padding-left: 52px`, rail off-canvas, no backdrop, preference persisted, profile dropup closed;
- expand → back to the docked 240px rail, no backdrop, no dimming, the floating button gone;
- keyboard: collapse leaves focus on the floating expand button, expanding puts it back on the footer chevron, and loading a collapsed rail leaves focus on the body;
- navigation keeps the expanded rail open; the preference survives a reload;
- no horizontal overflow on dashboard, Discussion, Intégrations, Appareils (incl. dark mode) or the new-dashboard editor; the chat page spans the full viewport in both states;
- at 390px the desktop controls are hidden and the mobile drawer still opens over its backdrop, closed by backdrop tap or Escape.
Master is merged in (the connected-state list and the mobile burger's alert dot carry `gatewayPaymentRequired` alongside this branch's state).
## 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.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
https://claude.ai/code/session_01JnwsS9jopHYHX3GQMViT2c
Zögert nicht, dem PR zu folgen, es zu testen (optional, besonders bei kleinen Anfragen) und euer Feedback hier zu hinterlassen, falls nötig.
