From 4a46faa293b4c78427fa3eb6a107f66f2f3f6ce1 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sat, 31 Aug 2024 00:29:21 -0400
Subject: [PATCH] Fixe lg SearchBar.

---
 src/views/main/Header.vue | 104 +++++++++++++++++++++++++-------------
 1 file changed, 70 insertions(+), 34 deletions(-)

diff --git a/src/views/main/Header.vue b/src/views/main/Header.vue
index dc14c8d..25f3d65 100644
--- a/src/views/main/Header.vue
+++ b/src/views/main/Header.vue
@@ -3,7 +3,6 @@
       class="py-1 flex items-center justify-between bg-white shadow-md shadow-gray-700 z-20"
       @click.stop
   >
-    
     <div class="flex items-center">
       <v-app-bar-nav-icon @click.stop="sideBarStore.toggle()">
       </v-app-bar-nav-icon>
@@ -26,30 +25,45 @@
         ></v-img>
       </RouterLink>
     </div>
-
-   
-    <div class="flex-grow flex items-center justify-center relative"> 
-      <div v-if="showSearch || !isSmallScreen" class="flex-grow  flex justify-center items-center " >
-        <template v-if="showSearch">
-          <v-text-field
-              density="compact"
-              rounded
-              variant="outlined"
-              v-model="searchQuery"
-              placeholder="Recherche"
-              hide-details
-              clearable              
-              append-inner-icon="mdi-magnify"
-              @click.stop
-              @click:append-inner="onSearch"
-              @keyup.enter="onSearch"
-          >
-          </v-text-field>
-        </template>
+    <!-- SmallScreen Searchbar  -->
+    <div class="flex-grow flex items-center justify-center relative">    
+      <div v-if="showSearch && isSmallScreen" class="search-bar-wrapper">
+        <v-text-field
+            density="compact"
+            rounded
+            variant="outlined"
+            v-model="searchQuery"
+            placeholder="Recherche"
+            hide-details
+            clearable
+            append-inner-icon="mdi-magnify"
+            @click.stop
+            @click:append-inner="onSearch"
+            @keyup.enter="onSearch"
+        >
+        </v-text-field>
       </div>
-    
 
-      <div v-if="!isSmallScreen || !showSearch" class="absolute-center flex">       
+      <!-- largeScreen Searchbar  -->
+      <div v-if="showSearch && !isSmallScreen" class="search-bar-large-screen">
+        <v-text-field
+            density="compact"
+            rounded
+            variant="outlined"
+            v-model="searchQuery"
+            placeholder="Recherche"
+            hide-details
+            clearable
+            append-inner-icon="mdi-magnify"
+            @click.stop
+            @click:append-inner="onSearch"
+            @keyup.enter="onSearch"
+        >
+        </v-text-field>
+      </div>
+
+      <!-- Buttons -->
+      <div v-if="!showSearch" class="absolute-center flex">
         <v-btn
             v-if="authStore.isAuthenticated"
             variant="plain"
@@ -59,8 +73,6 @@
         >
           <v-icon>mdi-television</v-icon>
         </v-btn>
-
-       
         <v-btn
             variant="plain"
             icon
@@ -71,7 +83,7 @@
         </v-btn>
       </div>
     </div>
-   
+
     <div class="flex items-center space-x-4 search-container">
       <template v-if="!showSearch">
         <v-icon class="mx-2 cursor-pointer" @click.stop="toggleSearch">mdi-magnify</v-icon>
@@ -79,7 +91,7 @@
 
       <v-btn
           variant="text"
-          class="p-0 mx-0 min-w-0"          
+          class="p-0 mx-0 min-w-0"
           @click="toggleLanguage"
       >
         {{ selectedLanguage === 'fr' ? 'Fr' : 'En' }}
@@ -97,7 +109,8 @@
                   alt="Profile Image"
                   class="ml-2 rounded-full"
                   width="32"
-                  height="32">
+                  height="32"
+              />
             </div>
           </template>
 
@@ -147,7 +160,7 @@
 </template>
 
 <script setup>
-import { ref, onBeforeUnmount, onBeforeMount } from "vue";
+import { ref, onBeforeUnmount, onBeforeMount, watch } from "vue";
 import { useRouter } from 'vue-router';
 import { useSideBarStore } from '@/stores/sideBarStore.js';
 import { useUserStore } from "@/stores/userStore.js";
@@ -166,6 +179,10 @@ const searchQuery = ref("");
 const showSearch = ref(false);
 const isSmallScreen = ref(smAndDown.value);
 
+watch(smAndDown, (val) => {
+  isSmallScreen.value = val;
+});
+
 let selectedLanguage = ref(locale.value);
 initializeLocale();
 
@@ -232,20 +249,39 @@ function toggleLanguage() {
   @apply bg-[#903175] text-gray-200;
 }
 
-/* Explorer & feed others */
 .absolute-center {
   position: absolute;
-  left: 50%; 
+  left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 6px;
   align-items: center;
 }
 
-/* Explorer & feed center mobile */
-@media (max-width: 640px) { 
+.search-bar-wrapper {
+  position: absolute;
+  width: 100%;
+  max-width: 700px;
+  z-index: 50;
+}
+
+.search-bar-large-screen {
+  display: flex; 
+  width: 600px;
+  z-index: 50;
+}
+
+@media (min-width: 1024px) {
+  .search-bar-large-screen {
+    display: flex;
+    margin-left: auto;
+    width: 600px;
+  }
+}
+
+@media (max-width: 640px) {
   .absolute-center {
-    left: 65%; 
+    left: 65%;
     transform: translateX(-55%);
   }
 }