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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user