🐛 Navbar correction

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

@@ -32,6 +32,21 @@
             d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
           />
         </svg>
+        <svg
+          *ngIf="isSearchOpen"
+          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>
         <span class="sr-only">Search</span>
       </button>
       <div class="relative hidden lg:block">
@@ -60,7 +75,7 @@
             type="text"
             id="search-navbar"
             class="block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-            placeholder="Search..."
+            placeholder="Rechercher ..."
             formControlName="searchControl"
             (focus)="onFocus()"
             (blur)="onBlur()"
@@ -80,22 +95,6 @@
           </li>
         </ul>
       </div>
-        <svg
-          *ngIf="isSearchOpen"
-          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>
 
       <!-- Bouton pour ouvrir/fermer le menu burger en mobile -->
       <button
@@ -133,32 +132,6 @@
           />
         </svg>
       </button>
-      <!-- Barre de recherche en desktop -->
-      <div class="hidden lg:block relative">
-        <input
-          type="text"
-          class="block w-64 p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-          placeholder="Rechercher..."
-        />
-        <div
-          class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
-        >
-          <svg
-            class="w-4 h-4 text-gray-500 dark:text-gray-400"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 20 20"
-          >
-            <path
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
-            />
-          </svg>
-        </div>
-      </div>
 
       <!-- Bouton de déconnexion -->
       <button
@@ -175,7 +148,7 @@
       class="w-full lg:flex lg:w-auto lg:order-1"
     >
       <ul
-        class="w-full flex flex-col p-0 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 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
@@ -212,28 +185,51 @@
     <!-- Barre de recherche mobile (affichée quand isSearchOpen = true) -->
     <div *ngIf="isSearchOpen" class="w-full p-4 lg:hidden">
       <div class="lg:block relative w-full">
-        <input
-          type="text"
-          class="block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-          placeholder="Rechercher..."
-        />
-        <div
-          class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
-        >
-          <svg
-            class="w-4 h-4 text-gray-500 dark:text-gray-400"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 20 20"
+        <div class="relative lg:block">
+          <div
+            class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
           >
-            <path
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+            <svg
+              class="w-4 h-4 text-gray-500 dark:text-gray-400"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 20 20"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+              />
+            </svg>
+            <span class="sr-only">Search icon</span>
+          </div>
+          <form [formGroup]="searchForm">
+            <input
+              type="text"
+              id="search-navbar"
+              class="block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              placeholder="Rechercher ..."
+              formControlName="searchControl"
+              (focus)="onFocus()"
+              (blur)="onBlur()"
             />
-          </svg>
+          </form>
+
+          <ul
+            *ngIf="pinsFiltered.length > 0 && inputFocus"
+            class="bg-white dark:bg-gray-700 border border-gray-300 mt-2 rounded shadow absolute z-10 max-h-60 overflow-auto w-full"
+          >
+            <li
+              *ngFor="let suggestion of pinsFiltered"
+              (click)="clickSuggestion(suggestion)"
+              class="p-2 block text-sm font-medium text-gray-900 dark:text-white hover:bg-gray-500 cursor-pointer"
+            >
+              {{ suggestion.title }}
+            </li>
+          </ul>
         </div>
       </div>
     </div>

src/app/components/navbar/navbar.component.ts

@@ -1,5 +1,5 @@
-import { CommonModule, CommonModule, NgIf } from '@angular/common';
-import { Component, input, OnInit } from '@angular/core';
+import { CommonModule, NgIf } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
 import {
   FormBuilder,
   FormControl,
@@ -40,13 +40,17 @@ export class NavbarComponent implements OnInit {
 
   isSearchOpen: boolean = false;
   isNavbarOpen: boolean = false;
+
   toggleNavbar() {
     this.isNavbarOpen = !this.isNavbarOpen;
+    this.isSearchOpen = false;
   }
 
   toggleSearch() {
     this.isSearchOpen = !this.isSearchOpen;
+    this.isNavbarOpen = false;
   }
+
   pins: Pin[] = [];
   pinsFiltered: Pin[] = [];
   inputFocus: Boolean = false;