diff --git a/admin/index.php b/admin/index.php index 6743082..d0ed678 100644 --- a/admin/index.php +++ b/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> diff --git a/assets/css/layout.css b/assets/css/layout.css index 71cc534..58fdbe3 100644 --- a/assets/css/layout.css +++ b/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; + } } \ No newline at end of file diff --git a/assets/js/admin.js b/assets/js/admin.js index ab9a043..174a2a9 100644 --- a/assets/js/admin.js +++ b/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) {