m

2026-07-17 14:43:54 +07:00
parent 98a56eb130
commit f8385185c9
6 changed files with 42 additions and 15 deletions
@@ -16,7 +16,7 @@
    </script>
    <div class="app-layout">
        <!-- Mobile overlay (click outside to close) -->
-        <div id="sidebar-overlay" class="fixed inset-0 bg-black/30 hidden" aria-hidden="true"></div>
+        <div id="sidebar-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm hidden transition-opacity duration-200" aria-hidden="true"></div>
        <!-- Sidebar Component -->
        <x-sidebar />

@@ -121,12 +121,17 @@
                function openSidebar() {
                    sidebar.classList.remove('-translate-x-full');
                    overlay.classList.remove('hidden');
+                    overlay.classList.add('opacity-100');
                    document.body.style.overflow = 'hidden';
                }
                
                function closeSidebar() {
                    sidebar.classList.add('-translate-x-full');
-                    overlay.classList.add('hidden');
+                    overlay.classList.remove('opacity-100');
+                    // after transition, hide overlay
+                    setTimeout(() => {
+                        overlay.classList.add('hidden');
+                    }, 200);
                    document.body.style.overflow = '';
                }
                
@@ -140,6 +145,12 @@
                });
                closeBtn.addEventListener('click', closeSidebar);
                overlay.addEventListener('click', closeSidebar);
+                // ESC key to close sidebar
+                document.addEventListener('keydown', function (e) {
+                    if (e.key === 'Escape' && !overlay.classList.contains('hidden')) {
+                        closeSidebar();
+                    }
+                });
            }

            // Client-side flash message support