Navigation sidebar stays expanded as an overlay when the viewport is resized below the 64em breakpoint
## Problem/Motivation The Navigation module's left sidebar has two layouts: - **≥ 64em (wide):** the sidebar is fixed and *displaces* page content to the right (`--drupal-displace-offset-left` = sidebar width, e.g. 265px). - **< 64em (narrow):** the sidebar becomes an off-canvas drawer (off-screen, slid in on demand) and a control bar is shown; content is full-width (`--drupal-displace-offset-left` = 0). When the viewport is **resized live** from wide to narrow while the sidebar is **expanded**, the state does not fully transition: `--drupal-displace-offset-left` correctly drops to `0` (so page content becomes full-width), but the sidebar element stays rendered **expanded and fixed at full width (~265px) over the content**, with no backdrop — overlapping the page (the site header/logo end up behind it). The behavior is intermittent (sometimes it collapses correctly, sometimes it sticks), which points at a resize/state race rather than a static CSS issue. Resize-only: a fresh page load at any width is correct (wide = displaces; narrow = off-canvas drawer off-screen + control bar). Anonymous users unaffected. ## Steps to reproduce 1. Log in (admin) with the Navigation module enabled (`body.gin--core-navigation`). 2. On a wide viewport (e.g. 1400px), **expand** the sidebar (265px, pushing content). 3. Without reloading, drag the browser width below **64em** (e.g. 900px). 4. Observe: `--drupal-displace-offset-left` becomes `0` and content goes full-width, but the sidebar stays fixed at ~265px over the content. 5. Reload at 900px → correct (sidebar collapsed off-screen, control bar shown). ## Proposed resolution On the resize that crosses the 64em breakpoint, collapse the expanded sidebar to its narrow (off-canvas / control-bar) state so the rendered sidebar width stays in sync with `--drupal-displace-offset-left`. Drive the expanded/collapsed state from the same media-query/displace logic on `resize`, not only on load/toggle. ## Remaining tasks - Isolate whether the desync is in core Navigation's toolbar JS or Gin's `core_navigation` responsive override (test with stock Claro). - Fix the resize handler to collapse the sidebar below 64em. ## Environment - Drupal core: 11.3.12 - Navigation (core): 11.3.12 - Gin: 5.0.15, Gin Toolbar: 3.0.3 --- *Drafted with AI assistance (Claude Code) under human review, per the [Drupal AI policy](https://www.drupal.org/docs/develop/issues/issue-procedures-and-etiquette/policy-on-the-use-of-ai-when-contributing-to-drupal).* ### Checkpoints - [x] File an issue - [x] Addition/Change/Update/Fix - [ ] Testing to ensure no regression - [ ] Automated unit testing coverage - [ ] Automated functional testing coverage - [ ] UX/UI designer responsibilities - [ ] Readability - [ ] Accessibility - [ ] Performance - [ ] Security - [ ] Documentation - [ ] Code review by maintainers - [ ] Full testing and approval - [ ] Credit contributors - [ ] Review with the product owner - [ ] Release Notes - [ ] Release
issue