From dcf1bc7a1da719fc5ee1b8ae624cbecdf7507412 Mon Sep 17 00:00:00 2001
From: Esenjin <esenjin@sangigi-fuchsia.fr>
Date: Mon, 24 Feb 2025 15:20:20 +0100
Subject: [PATCH] =?UTF-8?q?am=C3=A9lioration=20de=20l'affichage=20du=20men?=
=?UTF-8?q?u=20dans=20l'admin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
admin/index.php | 3 ++-
assets/css/layout.css | 46 +++++++++++++++++++++++++++++++++++++++++++
assets/js/admin.js | 27 +++++++++++++++++++++++++
3 files changed, 75 insertions(+), 1 deletion(-)
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) {