From 36dd1203e529cdb422c06fc464f18f9cc90c7503 Mon Sep 17 00:00:00 2001
From: Alexis Feron <alexisferon081@gmail.com>
Date: Thu, 5 Jun 2025 10:53:11 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Improve=20navbar=20on=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/navbar/navbar.component.html   | 118 ++++++++++++++----
 src/app/components/navbar/navbar.component.ts |  12 +-
 2 files changed, 101 insertions(+), 29 deletions(-)

diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index f55d30b..13183b8 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -1,39 +1,105 @@
 <nav class="bg-white border-gray-200 dark:bg-gray-900">
-  <div class="max-w-screen-2xl flex flex-wrap items-center justify-between mx-auto p-2">
+  <div
+    class="max-w-screen-2xl flex flex-wrap items-center justify-between mx-auto p-2"
+  >
     <a routerLink="/" class="flex items-center rtl:space-x-reverse">
       <img src="./logo.png" class="h-14" alt="Memory Map Logo" />
-      <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white hidden lg:inline">Memory Map Admin</span>
+      <span
+        class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white hidden lg:inline"
+        >Memory Map Admin</span
+      >
     </a>
 
+    <!-- Bouton pour ouvrir/fermer le menu burger en mobile -->
+    <button
+      (click)="toggleNavbar()"
+      class="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
+    >
+      <svg
+        *ngIf="!isNavbarOpen"
+        class="w-5 h-5"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 17 14"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M1 1h15M1 7h15M1 13h15"
+        />
+      </svg>
+      <svg
+        *ngIf="isNavbarOpen"
+        class="w-5 h-5"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 17 17"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M2 2l13 13M2 15L15 2"
+        />
+      </svg>
+    </button>
+
     <!-- Menu principal -->
-    <div class="w-full lg:flex lg:w-auto lg:order-1 lg:flex-1 pl-10">
-      <div class="w-full flex flex-col lg:flex-row">
-        <ul class="w-full flex p-4 flex-col lg:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 lg:space-x-8 lg:flex-row lg:mt-0 lg:border-0 lg:bg-white dark:bg-gray-800 lg:dark:bg-gray-900 dark:border-gray-700">
-          <li>
-            <a routerLink="/dashboard" 
-               routerLinkActive="text-blue-700 dark:text-blue-500"
-               [routerLinkActiveOptions]="{exact: true}"
-               class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">
-              Tableau de bord
-            </a>
-          </li>
-          <li>
-            <a routerLink="/config"
-               routerLinkActive="text-blue-700 dark:text-blue-500"
-               class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">
-              Configuration
-            </a>
-          </li>
-        </ul>
+    <div
+      [ngClass]="{ hidden: !isNavbarOpen, flex: isNavbarOpen }"
+      class="w-full md:flex md:w-auto md:order-1 md:flex-1 pl-0 md:pl-10 hidden"
+    >
+      <div class="w-full flex flex-col md:flex-row md:items-stretch md:p-0 p-2">
+        <div
+          class="w-full bg-gray-800 dark:bg-gray-800 rounded-xl mt-4 md:mt-0 p-4 flex flex-col md:bg-transparent md:dark:bg-transparent md:p-0 md:rounded-none"
+        >
+          <ul
+            class="w-full flex flex-col space-y-2 md:space-y-0 md:space-x-8 md:flex-row md:p-0 font-medium"
+          >
+            <li>
+              <a
+                routerLink="/dashboard"
+                routerLinkActive="text-blue-700 dark:text-blue-500"
+                [routerLinkActiveOptions]="{ exact: true }"
+                class="block py-2 text-gray-100 dark:text-white hover:text-gray-300 dark:hover:text-gray-300 md:text-left md:text-gray-900 md:dark:text-white md:hover:text-gray-700 md:dark:hover:text-gray-300"
+              >
+                Tableau de bord
+              </a>
+            </li>
+            <li>
+              <a
+                routerLink="/config"
+                routerLinkActive="text-blue-700 dark:text-blue-500"
+                class="block py-2 text-gray-100 dark:text-white hover:text-gray-300 dark:hover:text-gray-300 md:text-left md:text-gray-900 md:dark:text-white md:hover:text-gray-700 md:dark:hover:text-gray-300"
+              >
+                Configuration
+              </a>
+            </li>
+          </ul>
+        </div>
+        <!-- Bouton de déconnexion (visible uniquement sur mobile) -->
+        <div class="md:hidden w-full flex justify-center mt-4">
+          <button
+            (click)="logout()"
+            class="w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
+          >
+            Déconnexion
+          </button>
+        </div>
       </div>
     </div>
 
-    <!-- Bouton de déconnexion -->
-    <div class="flex lg:order-2">
-      <button (click)="logout()"
-              class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">
+    <!-- Bouton de déconnexion (visible uniquement sur desktop) -->
+    <div class="hidden md:flex md:order-2">
+      <button
+        (click)="logout()"
+        class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
+      >
         Déconnexion
       </button>
     </div>
   </div>
-</nav> 
\ No newline at end of file
+</nav>
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts
index 064d662..9793ae8 100644
--- a/src/app/components/navbar/navbar.component.ts
+++ b/src/app/components/navbar/navbar.component.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 import { AuthService } from '../../services/auth.service';
 
@@ -7,13 +7,19 @@ import { AuthService } from '../../services/auth.service';
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   styleUrl: './navbar.component.css',
-  imports: [CommonModule, RouterModule]
+  imports: [CommonModule, RouterModule],
 })
 export class NavbarComponent {
+  isNavbarOpen = false;
+
   constructor(private authService: AuthService, private router: Router) {}
 
+  toggleNavbar(): void {
+    this.isNavbarOpen = !this.isNavbarOpen;
+  }
+
   logout(): void {
     this.authService.logout();
     this.router.navigate(['/login']);
   }
-} 
\ No newline at end of file
+}