quoije/yaris-obd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix sidebar arrow direction: use CSS rotation not JS icon swap

Browse Source 
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]>
This commit is contained in:
Mathieu Moran
2026-08-10 05:04:57 -04:00
co-authored by Copilot
parent 3c3c8bba71
commit 2f1e35414d
1 changed files with 2 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/theme.js
+2 -4
View File
@@ -11,22 +11,20 @@
function applyCollapsed(collapsed) { function applyCollapsed(collapsed) {
sidebar.classList.toggle('collapsed', collapsed); sidebar.classList.toggle('collapsed', collapsed);
contentWrapper.classList.toggle('sidebar-collapsed', collapsed); contentWrapper.classList.toggle('sidebar-collapsed', collapsed);
const icon = toggleBtn && toggleBtn.querySelector('i');
if (icon) {
icon.className = collapsed ? 'fas fa-chevron-right' : 'fas fa-chevron-left';
}
} }
// Restore saved state instantly — suppress transitions so there's no // Restore saved state instantly — suppress transitions so there's no
// collapse animation flash on every page navigation. // collapse animation flash on every page navigation.
sidebar.style.transition = 'none'; sidebar.style.transition = 'none';
contentWrapper.style.transition = 'none'; contentWrapper.style.transition = 'none';
if (toggleBtn) toggleBtn.style.transition = 'none';
applyCollapsed(localStorage.getItem(COLLAPSED_KEY) === '1'); applyCollapsed(localStorage.getItem(COLLAPSED_KEY) === '1');
// Re-enable transitions after one frame so the toggle button still animates. // Re-enable transitions after one frame so the toggle button still animates.
requestAnimationFrame(function () { requestAnimationFrame(function () {
requestAnimationFrame(function () { requestAnimationFrame(function () {
sidebar.style.transition = ''; sidebar.style.transition = '';
contentWrapper.style.transition = ''; contentWrapper.style.transition = '';
if (toggleBtn) toggleBtn.style.transition = '';
}); });
}); });