Fix sidebar collapse/expand UX

JS was toggling .collapsed on the wrong element (dashboardSidebar div
instead of lt-sidebar aside), and the expand button was permanently
display:none. When collapsed, users had no way to re-expand.

- toggleSidebar now targets lt-sidebar (the aside)
- Toggle button flips ◀ ↔ ▶ to indicate state and serve as the expand button
- Collapsed CSS hides the body and label, centers the ▶ button in the strip
- Remove the dead sidebarExpandBtn element from HTML
- Persist and restore state correctly on page load

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-06 23:11:47 -04:00
parent 355b173070
commit 5c1ec6882e
3 changed files with 21 additions and 17 deletions
+4
View File
@@ -1450,6 +1450,10 @@ select option:checked {
transition: var(--transition-default);
}
.lt-sidebar.collapsed { width: 32px; overflow: hidden; }
.lt-sidebar.collapsed .lt-sidebar-body { display: none; }
.lt-sidebar.collapsed .lt-sidebar-header { justify-content: center; padding: 0.5rem 0; border-bottom: none; }
.lt-sidebar.collapsed .lt-sidebar-header > span:first-child { display: none; }
.lt-sidebar.collapsed .lt-sidebar-toggle { font-size: 0.8rem; padding: 0.4rem; color: var(--accent-cyan); }
.lt-sidebar-header {
display: flex;