amélioration de l'affichage du menu dans l'admin

admin/index.php

@@ -48,6 +48,7 @@ $stories = Stories::getAll();
             <?php endif; ?>
             <span>Administration</span>
         </div>
+        <!-- Le bouton hamburger sera inséré par JS -->
         <div class="nav-menu">
             <a href="../index.php" target="_blank" class="button">Visiter le site</a>
             <a href="profile.php" class="button">Profil</a>
@@ -59,7 +60,7 @@ $stories = Stories::getAll();
             </form>
         </div>
     </nav>
-
+    
     <main class="admin-main">
         <h1>Gestion des romans</h1>
         

assets/css/layout.css

@@ -42,6 +42,17 @@
     border-color: var(--error-color);
 }
 
+/* Menu hamburger pour mobile */
+.menu-toggle {
+    display: none;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: var(--spacing-sm);
+}
+
 /* Conteneur principal */
 .admin-main {
     padding: var(--spacing-xl);
@@ -67,4 +78,39 @@
     .stories-list {
         gap: var(--spacing-md);
     }
+
+    .nav-menu {
+        flex-direction: column;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        background-color: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius-sm);
+        padding: var(--spacing-md);
+        z-index: 100;
+        width: 200px;
+        gap: var(--spacing-sm);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        
+        /* État caché par défaut */
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-10px);
+        transition: all var(--transition-fast);
+    }
+    
+    .nav-menu.active {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+    }
+    
+    .menu-toggle {
+        display: block;
+    }
+    
+    .admin-nav {
+        position: relative;
+    }
 }

assets/js/admin.js

@@ -1,4 +1,31 @@
 document.addEventListener('DOMContentLoaded', function() {
+        // Gestion du menu mobile
+        const navMenu = document.querySelector('.nav-menu');
+        const navBrand = document.querySelector('.nav-brand');
+        
+        // Créer le bouton hamburger s'il n'existe pas déjà
+        if (!document.querySelector('.menu-toggle')) {
+            const menuToggle = document.createElement('button');
+            menuToggle.className = 'menu-toggle';
+            menuToggle.innerHTML = '☰';
+            menuToggle.setAttribute('aria-label', 'Menu');
+            
+            // Insérer le bouton avant le menu
+            navMenu.parentNode.insertBefore(menuToggle, navMenu);
+            
+            // Gérer les clics sur le bouton
+            menuToggle.addEventListener('click', function() {
+                navMenu.classList.toggle('active');
+            });
+            
+            // Fermer le menu au clic en dehors
+            document.addEventListener('click', function(e) {
+                if (!navMenu.contains(e.target) && !menuToggle.contains(e.target)) {
+                    navMenu.classList.remove('active');
+                }
+            });
+        }
+        
     // Gestion de la suppression des romans
     const storyList = document.querySelector('.stories-list');
     if (storyList) {