✨🚸 Improve navbar on mobile (Alexis) + reorganized the links.

src/app/components/navbar/navbar.component.html

@@ -1,37 +1,130 @@
 <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
-      <div class="w-full flex flex-col lg:flex-row">
+      [ngClass]="{ hidden: !isNavbarOpen, flex: isNavbarOpen }"
-        <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">
+      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" 
+              <a
-               routerLinkActive="text-blue-700 dark:text-blue-500"
+                routerLink="/dashboard"
+                routerLinkActive="text-blue-700 dark:text-blue-500 border-b-2 border-blue-700 dark:border-blue-500"
                 [routerLinkActiveOptions]="{ exact: true }"
-               class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">
+                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 transition-colors duration-200"
+              >
                 Tableau de bord
               </a>
             </li>
             <li>
-            <a routerLink="/config"
+              <a
-               routerLinkActive="text-blue-700 dark:text-blue-500"
+                routerLink="/users"
-               class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">
+                routerLinkActive="text-blue-700 dark:text-blue-500 border-b-2 border-blue-700 dark:border-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 transition-colors duration-200"
+              >
+                Utilisateurs
+              </a>
+            </li>
+            <li>
+              <a
+                routerLink="/pois"
+                routerLinkActive="text-blue-700 dark:text-blue-500 border-b-2 border-blue-700 dark:border-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 transition-colors duration-200"
+              >
+                Points d'intérêt
+              </a>
+            </li>
+            <li>
+              <a
+                routerLink="/import"
+                routerLinkActive="text-blue-700 dark:text-blue-500 border-b-2 border-blue-700 dark:border-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 transition-colors duration-200"
+              >
+                Import POIs
+              </a>
+            </li>
+            <li>
+              <a
+                routerLink="/config"
+                routerLinkActive="text-blue-700 dark:text-blue-500 border-b-2 border-blue-700 dark:border-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 transition-colors duration-200"
+              >
                 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 -->
+    <!-- Bouton de déconnexion (visible uniquement sur desktop) -->
-    <div class="flex lg:order-2">
+    <div class="hidden md:flex md:order-2">
-      <button (click)="logout()"
+      <button
-              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">
+        (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>

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,11 +7,17 @@ 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']);