menu mobile

app/assets/controllers/header-mobile_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['menu'];
+
+    toggle() {
+        this.menuTarget.classList.toggle('open');
+        this.element.querySelector('.hamburger').classList.toggle('open');
+    }
+
+    // Fermer le menu quand on clique sur un lien
+    close() {
+        this.menuTarget.classList.remove('open');
+        this.element.querySelector('.hamburger').classList.remove('open');
+    }
+}

app/assets/styles/partials/header.css

@@ -348,11 +348,97 @@ header .header-dropdown .dropdown-link::after { display: none !important; }
     border-color: rgba(255, 255, 255, 0.5);
 }
 
-/* ── MOBILE ────────────────────────────────────────────────────── */
+/* ── HAMBURGER (MOBILE) ────────────────────────────────────────── */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    width: 28px;
+    height: 24px;
+    margin: 0 0.5rem;
+}
+
+.hamburger span {
+    display: block;
+    width: 100%;
+    height: 2.5px;
+    background: var(--text-light);
+    border-radius: 2px;
+    transition: all var(--duration-normal) ease;
+}
+[data-theme="dark"] .hamburger span {
+    background: var(--text-dark);
+}
+
+/* Animation : croix quand ouvert */
+.hamburger.open span:nth-child(1) {
+    transform: rotate(45deg) translate(4px, 4px);
+}
+.hamburger.open span:nth-child(2) {
+    opacity: 0;
+}
+.hamburger.open span:nth-child(3) {
+    transform: rotate(-45deg) translate(7px, -7px);
+}
+
+/* ── MOBILE : transformer nav en panneau ────────────────────────── */
 @media (max-width: 640px) {
-    header nav   { display: none !important; }
+    .hamburger {
+        display: flex;
+    }
+
+    header nav {
+        position: fixed;
+        top: 72px;
+        left: -100%;
+        width: 100%;
+        height: calc(100vh - 72px);
+        background: rgba(255, 255, 255, 0.75);
+        backdrop-filter: blur(var(--blur-md));
+        -webkit-backdrop-filter: blur(var(--blur-md));
+        border-top: 1px solid var(--border-light);
+
+        flex-direction: column !important;
+        gap: 0.5rem !important;
+        padding: 2rem 1.5rem !important;
+        z-index: 99;
+        transition: left var(--duration-normal) ease;
+        overflow-y: auto;
+    }
+    [data-theme="dark"] header nav {
+        background: rgba(12, 10, 18, 0.95);
+        border-top-color: var(--border-dark);
+    }
+
+    header nav.open {
+        left: 0;
+    }
+
     header { padding: 0 1rem !important; }
-    .header-left { gap: 0; }
+    .header-left { gap: 0.5rem; }
+
+    /* Adapter les liens pour mobile */
+    header nav .nav-link {
+        padding: 0.75rem 1rem !important;
+        border-radius: 10px !important;
+        border: 1px solid var(--border-light) !important;
+        background: transparent !important;
+        font-size: 0.95rem !important;
+        display: block;
+    }
+    [data-theme="dark"] header nav .nav-link {
+        border-color: var(--border-dark) !important;
+    }
+    header nav .nav-link:hover {
+        background: rgba(0, 0, 0, 0.05) !important;
+    }
+    [data-theme="dark"] header nav .nav-link:hover {
+        background: rgba(255, 255, 255, 0.07) !important;
+    }
 }
 
 /* ── MESSAGE D'ERREUR DANS LE DROPDOWN ─────────────────────────── */

app/templates/partials/_header.html.twig

@@ -5,35 +5,50 @@
 
 {% set current_route = app.request.attributes.get('_route') %}
 
-<header>
+<header data-controller="header-mobile">
 
     {# ── Gauche : Logo + Navigation ───────────────────────────── #}
     <div class="header-left">
+        <button class="hamburger" data-action="click->header-mobile#toggle" aria-label="Menu">
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
 
         <a href="{{ path('app_accueil') }}" class="logo">
             <img src="{{ asset('images/logo/logo-light.svg') }}" alt="Logo" class="logo-light">
             <img src="{{ asset('images/logo/logo-dark.svg') }}" alt="Logo" class="logo-dark">
         </a>
 
-        <nav>
+        <nav data-header-mobile-target="menu">
             <a href="{{ path('app_accueil') }}"
-               class="nav-link {{ current_route == 'app_accueil' ? 'active' }}">
+               class="nav-link {{ current_route == 'app_accueil' ? 'active' }}"
+               data-action="click->header-mobile#close"
+            >
                 Accueil
             </a>
             <a href="{{ path('app_modpack') }}"
-               class="nav-link {{ current_route == 'app_modpack' ? 'active' }}">
+               class="nav-link {{ current_route == 'app_modpack' ? 'active' }}"
+               data-action="click->header-mobile#close"
+            >
                 Modpack
             </a>
             <a href="{{ path('app_accueil') }}"
-               class="nav-link {{ current_route == 'app_home' ? 'active' }}">
+               class="nav-link {{ current_route == 'app_home' ? 'active' }}"
+               data-action="click->header-mobile#close"
+            >
                 Statistiques
             </a>
             <a href="{{ path('app_accueil') }}"
-               class="nav-link {{ current_route == 'app_home' ? 'active' }}">
+               class="nav-link {{ current_route == 'app_home' ? 'active' }}"
+               data-action="click->header-mobile#close"
+            >
                 Actualité
             </a>
             <a href="{{ path('app_maps') }}"
-               class="nav-link {{ current_route == 'app_maps' ? 'active' }}">
+               class="nav-link {{ current_route == 'app_maps' ? 'active' }}"
+               data-action="click->header-mobile#close"
+            >
                 Maps
             </a>
         </nav>