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:
@@ -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;
|
||||
|
||||
+17
-11
@@ -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 isCollapsed = sidebar.classList.toggle('collapsed');
|
||||
layout.classList.toggle('sidebar-collapsed', isCollapsed);
|
||||
// Store state in localStorage
|
||||
localStorage.setItem('sidebarCollapsed', isCollapsed ? 'true' : 'false');
|
||||
const sidebar = document.getElementById('lt-sidebar');
|
||||
if (!sidebar) return;
|
||||
const isCollapsed = sidebar.classList.toggle('collapsed');
|
||||
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');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -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">▶ Filters</button>
|
||||
|
||||
<!-- ─── MAIN CONTENT ─────────────────────────────────────── -->
|
||||
<div class="lt-content">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user