Mathieu MoranandCopilot
2f1e35414d
The CSS already handles the arrow direction with transform:rotate(180deg) on .app-sidebar.collapsed .sidebar-collapse-btn. The JS icon className swap was fighting with CSS rotation causing a double-flip. Remove JS icon manipulation, let CSS handle it. Also suppress the button transition on page load. Co-authored-by: Copilot <[email protected]>
39 lines
1.5 KiB
JavaScript
39 lines
1.5 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
const COLLAPSED_KEY = 'sidebar-collapsed';
|
|
const sidebar = document.getElementById('app-sidebar');
|
|
const contentWrapper = document.getElementById('content-wrapper');
|
|
const toggleBtn = document.getElementById('sidebarToggle');
|
|
|
|
if (!sidebar) return;
|
|
|
|
function applyCollapsed(collapsed) {
|
|
sidebar.classList.toggle('collapsed', collapsed);
|
|
contentWrapper.classList.toggle('sidebar-collapsed', collapsed);
|
|
}
|
|
|
|
// Restore saved state instantly — suppress transitions so there's no
|
|
// collapse animation flash on every page navigation.
|
|
sidebar.style.transition = 'none';
|
|
contentWrapper.style.transition = 'none';
|
|
if (toggleBtn) toggleBtn.style.transition = 'none';
|
|
applyCollapsed(localStorage.getItem(COLLAPSED_KEY) === '1');
|
|
// Re-enable transitions after one frame so the toggle button still animates.
|
|
requestAnimationFrame(function () {
|
|
requestAnimationFrame(function () {
|
|
sidebar.style.transition = '';
|
|
contentWrapper.style.transition = '';
|
|
if (toggleBtn) toggleBtn.style.transition = '';
|
|
});
|
|
});
|
|
|
|
if (toggleBtn) {
|
|
toggleBtn.addEventListener('click', function () {
|
|
const nowCollapsed = !sidebar.classList.contains('collapsed');
|
|
applyCollapsed(nowCollapsed);
|
|
localStorage.setItem(COLLAPSED_KEY, nowCollapsed ? '1' : '0');
|
|
});
|
|
}
|
|
})();
|