From bacf42b7dfe2f8a06125336d403cb3ae55565191 Mon Sep 17 00:00:00 2001
From: Alix JEUDI--LEMOINE <alix.jeudi--lemoine@etu.uca.fr>
Date: Wed, 28 May 2025 20:32:28 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Move=20logout=20at=20bottom=20of?=
 =?UTF-8?q?=20burger=20menu=20on=20mobile=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/navbar/navbar.component.html   | 93 +++++++++----------
 1 file changed, 44 insertions(+), 49 deletions(-)

diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index 3b3f9c4..a3140ee 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -133,29 +133,12 @@
         </svg>
       </button>
 
-      <!-- Bouton de déconnexion -->
+      <!-- Bouton de déconnexion (visible uniquement sur desktop) -->
       <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 lg:px-5 lg:py-2.5 px-4 py-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
+        class="hidden lg:block 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"
       >
-        <span class="hidden lg:inline">Déconnexion</span>
-        <svg
-          class="w-6 h-6 text-gray-800 lg:hidden dark:text-white"
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M20 12H8m12 0-4 4m4-4-4-4M9 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h2"
-          />
-        </svg>
+        Déconnexion
       </button>
     </div>
 
@@ -164,36 +147,48 @@
       [ngClass]="{ hidden: !isNavbarOpen, flex: isNavbarOpen }"
       class="w-full lg:flex lg:w-auto lg:order-1"
     >
-      <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="/map"
-            *ngIf="!showTimeline"
-            class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
-            >Carte</a
-          >
-          <a
-            routerLink="/timeline"
-            *ngIf="showTimeline"
-            class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
-            >Timeline</a
-          >
-        </li>
-        <li>
-          <a
-            class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
-            >Quêtes</a
+      <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="/map"
+              *ngIf="!showTimeline"
+              class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
+              >Carte</a
+            >
+            <a
+              routerLink="/timeline"
+              *ngIf="showTimeline"
+              class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
+              >Timeline</a
+            >
+          </li>
+          <li>
+            <a
+              class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
+              >Quêtes</a
+            >
+          </li>
+          <li>
+            <app-add-pin-popup></app-add-pin-popup>
+          </li>
+          <li>
+            <app-friend-page></app-friend-page>
+          </li>
+        </ul>
+
+        <!-- Bouton de déconnexion (visible uniquement sur mobile) -->
+        <div class="lg:hidden w-full px-4 p-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"
           >
-        </li>
-        <li>
-          <app-add-pin-popup></app-add-pin-popup>
-        </li>
-        <li>
-          <app-friend-page></app-friend-page>
-        </li>
-      </ul>
+            Déconnexion
+          </button>
+        </div>
+      </div>
     </div>
 
     <!-- Barre de recherche mobile (affichée quand isSearchOpen = true) -->