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;
+16 -10
View File
@@ -2,14 +2,16 @@
* Toggle sidebar visibility on desktop
*/
function toggleSidebar() {
const sidebar = document.getElementById('dashboardSidebar');
const layout = document.getElementById('dashboardLayout');
if (sidebar && layout) {
const sidebar = document.getElementById('lt-sidebar');
if (!sidebar) return;
const isCollapsed = sidebar.classList.toggle('collapsed');
layout.classList.toggle('sidebar-collapsed', isCollapsed);
// Store state in localStorage
localStorage.setItem('sidebarCollapsed', isCollapsed ? 'true' : 'false');
const btn = sidebar.querySelector('.lt-sidebar-toggle');
if (btn) {
btn.textContent = isCollapsed ? '\u25B6' : '\u25C0';
btn.setAttribute('aria-label', isCollapsed ? 'Expand filter sidebar' : 'Collapse filter sidebar');
btn.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true');
}
localStorage.setItem('sidebarCollapsed', isCollapsed ? 'true' : 'false');
}
/**
@@ -77,11 +79,15 @@ function initMobileSidebar() {
// Restore sidebar state on page load
document.addEventListener('DOMContentLoaded', function() {
const savedState = localStorage.getItem('sidebarCollapsed');
const sidebar = document.getElementById('dashboardSidebar');
const layout = document.getElementById('dashboardLayout');
if (savedState === 'true' && sidebar && layout) {
const sidebar = document.getElementById('lt-sidebar');
if (savedState === 'true' && sidebar) {
sidebar.classList.add('collapsed');
layout.classList.add('sidebar-collapsed');
const btn = sidebar.querySelector('.lt-sidebar-toggle');
if (btn) {
btn.textContent = '\u25B6';
btn.setAttribute('aria-label', 'Expand filter sidebar');
btn.setAttribute('aria-expanded', 'false');
}
}
});
-6
View File
@@ -500,12 +500,6 @@ include __DIR__ . '/layout_header.php';
</div><!-- /.lt-sidebar-body -->
</aside>
<!-- Collapsed expand button -->
<button type="button" class="lt-sidebar-expand-btn" id="sidebarExpandBtn"
data-action="toggle-sidebar"
aria-label="Show filters" aria-expanded="false" aria-controls="lt-sidebar"
style="display:none">&#x25B6; Filters</button>
<!-- ─── MAIN CONTENT ─────────────────────────────────────── -->
<div class="lt-content">