From f3670f56fea67e664dd12a3496fdc21354ece928 Mon Sep 17 00:00:00 2001
From: Antoine <antoine@sdv.fr>
Date: Thu, 20 Aug 2026 17:35:12 +0200
Subject: [PATCH] =?UTF-8?q?Header=20:=20menu=20hamburger=20d=C3=A9roulant?=
 =?UTF-8?q?=20sur=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sous 700px les liens de navigation étaient entassés/rognés dans le
bandeau ; ils passent maintenant dans un panneau déroulant ouvert par
un bouton ☰, sans rien changer à l'affichage desktop (les liens
restent des enfants flex directs de <nav> via display:contents).
---
 app/templates/base.html | 98 +++++++++++++++++++++++++++++++++++------
 1 file changed, 85 insertions(+), 13 deletions(-)

diff --git a/app/templates/base.html b/app/templates/base.html
index 2403530..b7e4f3d 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -42,14 +42,14 @@
 
     /* ── Nav ── */
     nav {
+      position: relative;
       background: var(--nav-bg);
       color: var(--ground);
-      min-height: 50px;
-      padding: .5rem 2rem;
+      height: 50px;
+      padding: 0 2rem;
       display: flex;
       align-items: center;
-      flex-wrap: wrap;
-      gap: .6rem 2rem;
+      gap: 2rem;
       border-bottom: 3px solid var(--accent-2);
     }
     .nav-brand {
@@ -88,9 +88,57 @@
     }
     .nav-logout { opacity: .6; font-size: 11px; }
 
+    /* Sur desktop les liens restent des enfants flex directs de <nav> (display:contents
+       les rend "transparents" au layout) ; sur mobile ils deviennent un panneau
+       déroulant contrôlé par le bouton hamburger. */
+    .nav-links { display: contents; }
+    .nav-burger {
+      display: none;
+      flex-direction: column;
+      justify-content: center;
+      gap: 4px;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      background: none;
+      border: none;
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+    .nav-burger-bar {
+      display: block;
+      width: 20px;
+      height: 2px;
+      background: var(--ground);
+      transition: transform .15s, opacity .15s;
+    }
+    .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
+    .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(2) { opacity: 0; }
+    .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
+
     @media (max-width: 700px) {
-      nav { padding: .5rem 1rem; gap: .5rem 1rem; }
-      nav .spacer { flex-basis: 100%; height: 0; }
+      nav { padding: 0 1rem; }
+      .nav-burger { display: flex; }
+      .nav-links {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0;
+        background: var(--nav-bg);
+        border-bottom: 3px solid var(--accent-2);
+        padding: .5rem 0;
+        z-index: 200;
+      }
+      .nav-links.open { display: flex; }
+      .nav-links a.nav-link, .nav-links .nav-user {
+        padding: .75rem 1.25rem;
+        width: 100%;
+      }
+      .nav-links .nav-user { display: block; }
     }
 
     /* ── Layout ── */
@@ -1116,17 +1164,41 @@
     <a href="/" class="nav-brand"><span class="nav-dot"></span>Décompte Horaire</a>
     <span class="spacer"></span>
     {% if current_user is defined and current_user %}
-    <a href="/" class="nav-link">Semaine courante</a>
-    <a href="/stats" class="nav-link">Statistiques</a>
-    <a href="/logs" class="nav-link">Journaux</a>
-    <a href="/settings" class="nav-link">Réglages</a>
-    <a href="/aide" class="nav-link">Aide</a>
-    <span class="nav-user">{{ current_user }}</span>
-    <a href="/logout" class="nav-link nav-logout">Déconnexion</a>
+    <button type="button" class="nav-burger" id="nav-burger" aria-expanded="false"
+            aria-controls="nav-links" aria-label="Menu" onclick="toggleNavMenu()">
+      <span class="nav-burger-bar"></span><span class="nav-burger-bar"></span><span class="nav-burger-bar"></span>
+    </button>
+    <div class="nav-links" id="nav-links">
+      <a href="/" class="nav-link">Semaine courante</a>
+      <a href="/stats" class="nav-link">Statistiques</a>
+      <a href="/logs" class="nav-link">Journaux</a>
+      <a href="/settings" class="nav-link">Réglages</a>
+      <a href="/aide" class="nav-link">Aide</a>
+      <span class="nav-user">{{ current_user }}</span>
+      <a href="/logout" class="nav-link nav-logout">Déconnexion</a>
+    </div>
     {% endif %}
   </nav>
   <div class="container">
     {% block content %}{% endblock %}
   </div>
+  <script>
+    function toggleNavMenu() {
+      var links = document.getElementById('nav-links');
+      var btn = document.getElementById('nav-burger');
+      var open = !links.classList.contains('open');
+      links.classList.toggle('open', open);
+      btn.setAttribute('aria-expanded', String(open));
+    }
+    document.addEventListener('click', function (e) {
+      var nav = document.querySelector('nav');
+      if (nav && !nav.contains(e.target)) {
+        var links = document.getElementById('nav-links');
+        var btn = document.getElementById('nav-burger');
+        if (links) links.classList.remove('open');
+        if (btn) btn.setAttribute('aria-expanded', 'false');
+      }
+    });
+  </script>
 </body>
 </html>