perf(ui): debounce window resize event for sidebar responsiveness

Debounce the window resize event listener with a 150ms timeout to prevent excessive executions, improving performance during window resizing.
This commit is contained in:
jgor20
2026-01-11 14:51:07 +00:00
parent dd7bfe724e
commit 10cbe2125a

View File

@@ -67,21 +67,27 @@ document.addEventListener('alpine:init', () => {
// Handle responsive sidebar transitions
let lastWidth = window.innerWidth;
let resizeTimeout = null;
window.addEventListener('resize', () => {
const currentWidth = window.innerWidth;
const lgBreakpoint = 1024;
if (resizeTimeout) clearTimeout(resizeTimeout);
// Desktop -> Mobile: Auto-close sidebar to prevent overlay blocking screen
if (lastWidth >= lgBreakpoint && currentWidth < lgBreakpoint) {
this.sidebarOpen = false;
}
resizeTimeout = setTimeout(() => {
const currentWidth = window.innerWidth;
const lgBreakpoint = 1024;
// Mobile -> Desktop: Auto-open sidebar (restore standard desktop layout)
if (lastWidth < lgBreakpoint && currentWidth >= lgBreakpoint) {
this.sidebarOpen = true;
}
// Desktop -> Mobile: Auto-close sidebar to prevent overlay blocking screen
if (lastWidth >= lgBreakpoint && currentWidth < lgBreakpoint) {
this.sidebarOpen = false;
}
lastWidth = currentWidth;
// Mobile -> Desktop: Auto-open sidebar (restore standard desktop layout)
if (lastWidth < lgBreakpoint && currentWidth >= lgBreakpoint) {
this.sidebarOpen = true;
}
lastWidth = currentWidth;
}, 150);
});
// Theme setup