convey: restore desktop hamburger as the sole path into body.menu-full

Commit 72706e4e hid the desktop hamburger on the theory that the
expander (menu-all) would cover its role, but menu-all shows icons
only — star toggles and drag handles stay hidden, so desktop users
lost access to favoriting and reordering. Put the hamburger back as
the single toggle for body.menu-full on both viewports, without
reverting 72706e4e's mobile-overlay lifecycle split.

- Hamburger visible on desktop; click toggles docked menu-full in
place (no backdrop, no focus trap) and persists via saveMenuState.
- Mobile overlay path (openMobileMenu/closeMobileMenu) unchanged.
- Outside-click gated on mobileQuery.matches so desktop-docked
menu-full is not dismissed by workspace clicks.
- Resize mobile->desktop tears down overlay artifacts (backdrop,
focus-trap listener) but preserves body.menu-full as docked;
resize desktop->mobile closes a docked menu-full cleanly.
- FOUC restore applies 'full' on both viewports; aria-expanded syncs
on restore regardless of breakpoint.
- New body.menu-full .workspace rule shifts the workspace to avoid
sidebar overlap; mobile margin-left: 0 !important still wins.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Jer Miller 1 month ago f338890d 53d17e45

+22 -17

3 changed files

expand all

convey

static

app.css

app.js

templates

app.html

+5 -7

convey/static/app.css

··· 114 114 margin-left: var(--menu-bar-width-minimal); 115 115 } 116 116 117 + body.menu-full .workspace { 118 + margin-left: var(--menu-bar-width-full); 119 + } 120 + 117 121 body.has-app-bar .workspace { 118 122 margin-bottom: calc(var(--app-bar-height) + 80px); 119 123 } ··· 254 258 } 255 259 256 260 .facet-bar #hamburger { 257 - display: none; 261 + display: flex; 258 262 font-size: 24px; 259 263 cursor: pointer; 260 264 padding: 8px; ··· 270 274 271 275 .facet-bar #hamburger:active { 272 276 background: rgba(0, 0, 0, 0.10); 273 - } 274 - 275 - @media (max-width: 768px) { 276 - .facet-bar #hamburger { 277 - display: flex; 278 - } 279 277 } 280 278 281 279 .facet-bar .status-icon {

+16 -9

convey/static/app.js

··· 751 751 exp.setAttribute('aria-label', 'show fewer apps'); 752 752 } 753 753 } 754 - if (mobileQuery.matches && document.body.classList.contains('menu-full')) { 754 + if (document.body.classList.contains('menu-full')) { 755 755 const ham = document.getElementById('hamburger'); 756 756 if (ham) ham.setAttribute('aria-expanded', 'true'); 757 757 } ··· 948 948 } else { 949 949 openMobileMenu(); 950 950 } 951 + } else { 952 + const nowFull = !document.body.classList.contains('menu-full'); 953 + document.body.classList.toggle('menu-full', nowFull); 954 + hamburger.setAttribute('aria-expanded', nowFull ? 'true' : 'false'); 955 + saveMenuState(); 956 + updateScrollShadows(); 957 + setTimeout(updateScrollShadows, 350); 951 958 } 952 959 }); 953 960 954 961 // Close menu when clicking outside 955 962 document.addEventListener('click', (e) => { 956 - if (document.body.classList.contains('menu-full')) { 963 + if (mobileQuery.matches && document.body.classList.contains('menu-full')) { 957 964 if (!menuBar.contains(e.target) && !hamburger.contains(e.target)) { 958 965 closeMobileMenu(); 959 966 } ··· 977 984 978 985 mobileQuery.addEventListener('change', (e) => { 979 986 if (!e.matches) { 980 - document.body.classList.remove('menu-full'); 981 - hamburger.setAttribute('aria-expanded', 'false'); 982 - saveMenuState(); 983 - 984 - if (menuBackdrop) { 987 + if (menuBackdrop?.classList.contains('visible')) { 985 988 menuBackdrop.classList.remove('visible'); 986 - } 987 - if (focusTrapHandler) { 988 989 document.removeEventListener('keydown', focusTrapHandler); 989 990 focusTrapHandler = null; 990 991 } 992 + hamburger.setAttribute( 993 + 'aria-expanded', 994 + document.body.classList.contains('menu-full') ? 'true' : 'false' 995 + ); 996 + } else if (document.body.classList.contains('menu-full')) { 997 + closeMobileMenu(); 991 998 } 992 999 }); 993 1000

+1 -1

convey/templates/app.html

··· 42 42 <body{% if body_classes %} class="{{ body_classes|join(' ') }}"{% endif %}> 43 43 <script> 44 44 // Restore sidebar state before first paint to prevent FOUC 45 - (function(){try{var s=localStorage.getItem('solstone:menu-state');if(s==='full'&&window.innerWidth<=768)document.body.classList.add('menu-full');else if(s==='all')document.body.classList.add('menu-all');}catch(e){/* Default collapsed menu state is safe when storage is unavailable. */}})(); 45 + (function(){try{var s=localStorage.getItem('solstone:menu-state');if(s==='full')document.body.classList.add('menu-full');else if(s==='all')document.body.classList.add('menu-all');}catch(e){/* Default collapsed menu state is safe when storage is unavailable. */}})(); 46 46 </script> 47 47 <a href="#main-content" class="skip-link">skip to content</a> 48 48

Configure Feed

Configure Feed