feat: implémenter refonte responsive globale avec sidebar mobile coulissante (overlay + transform), menu hamburger adaptatif, breakpoints optimisés 1100px/768px/640px/480px, grille links adaptative single-column mobile, toolbar empilé vertical, modales plein écran, calendrier daily en modal fixe, actions bulk wrap 100%, badges repositionnés, player média compact, tables scrollables horizontales, et masquage sélectif d'éléments header selon largeur écran

2026-02-19 13:12:44 -05:00
parent 3e545780e1
commit 1a9307485c
2 changed files with 550 additions and 6 deletions
@@ -36,13 +36,53 @@ document.addEventListener('DOMContentLoaded', () => {
    const sidebarOverlay = document.getElementById('sidebar-overlay');
    const mobileMenuBtn = document.getElementById('mobile-menu-btn');

+    function isMobileViewport() {
+        return window.matchMedia('(max-width: 1100px)').matches;
+    }
+
+    function openSidebar() {
+        if (!sidebar || !sidebarOverlay) return;
+        sidebar.classList.add('show');
+        sidebarOverlay.classList.add('show');
+        mobileMenuBtn?.setAttribute('aria-expanded', 'true');
+        sidebarOverlay.setAttribute('aria-hidden', 'false');
+        if (isMobileViewport()) {
+            document.body.style.overflow = 'hidden';
+        }
+    }
+
+    function closeSidebar() {
+        if (!sidebar || !sidebarOverlay) return;
+        sidebar.classList.remove('show');
+        sidebarOverlay.classList.remove('show');
+        mobileMenuBtn?.setAttribute('aria-expanded', 'false');
+        sidebarOverlay.setAttribute('aria-hidden', 'true');
+        document.body.style.overflow = '';
+    }
+
    function toggleSidebar() {
-        sidebar?.classList.toggle('show');
-        sidebarOverlay?.classList.toggle('show');
+        if (sidebar?.classList.contains('show')) {
+            closeSidebar();
+            return;
+        }
+        openSidebar();
    }

    mobileMenuBtn?.addEventListener('click', toggleSidebar);
-    sidebarOverlay?.addEventListener('click', toggleSidebar);
+    sidebarOverlay?.addEventListener('click', closeSidebar);
+    sidebar?.querySelectorAll('a').forEach((link) => {
+        link.addEventListener('click', () => {
+            if (isMobileViewport()) {
+                closeSidebar();
+            }
+        });
+    });
+
+    window.addEventListener('resize', () => {
+        if (!isMobileViewport()) {
+            closeSidebar();
+        }
+    });

    // ===== Search Overlay (Spotlight Style) =====
    const searchOverlay = document.getElementById('search-overlay');
@@ -397,11 +437,17 @@ document.addEventListener('DOMContentLoaded', () => {
    const filterUntagged = document.getElementById('filter-untagged');

    function toggleFilterPanel() {
-        filterPanel?.classList.toggle('show');
+        if (!filterPanel) return;
+        const isOpen = filterPanel.classList.toggle('show');
+        filterPanel.setAttribute('aria-hidden', String(!isOpen));
+        filterToggleBtn?.setAttribute('aria-expanded', String(isOpen));
    }

    function closeFilterPanel() {
-        filterPanel?.classList.remove('show');
+        if (!filterPanel) return;
+        filterPanel.classList.remove('show');
+        filterPanel.setAttribute('aria-hidden', 'true');
+        filterToggleBtn?.setAttribute('aria-expanded', 'false');
    }

    filterToggleBtn?.addEventListener('click', (e) => {
@@ -414,7 +460,8 @@ document.addEventListener('DOMContentLoaded', () => {
    // Close filter when clicking outside
    document.addEventListener('click', (e) => {
        if (filterPanel?.classList.contains('show')) {
-            if (!filterPanel.contains(e.target) && e.target !== filterToggleBtn) {
+            const clickedToggle = filterToggleBtn && (e.target === filterToggleBtn || filterToggleBtn.contains(e.target));
+            if (!filterPanel.contains(e.target) && !clickedToggle) {
                closeFilterPanel();
            }
        }