Fixe lg SearchBar.

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>
-
+    <!-- SmallScreen Searchbar  -->
-   
     <div class="flex-grow flex items-center justify-center relative">    
-      <div v-if="showSearch || !isSmallScreen" class="flex-grow  flex justify-center items-center " >
+      <div v-if="showSearch && isSmallScreen" class="search-bar-wrapper">
-        <template v-if="showSearch">
+        <v-text-field
-          <v-text-field
+            density="compact"
-              density="compact"
+            rounded
-              rounded
+            variant="outlined"
-              variant="outlined"
+            v-model="searchQuery"
-              v-model="searchQuery"
+            placeholder="Recherche"
-              placeholder="Recherche"
+            hide-details
-              hide-details
+            clearable
-              clearable              
+            append-inner-icon="mdi-magnify"
-              append-inner-icon="mdi-magnify"
+            @click.stop
-              @click.stop
+            @click:append-inner="onSearch"
-              @click:append-inner="onSearch"
+            @keyup.enter="onSearch"
-              @keyup.enter="onSearch"
+        >
-          >
+        </v-text-field>
-          </v-text-field>
-        </template>
       </div>
 
+      <!-- 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>
 
-      <div v-if="!isSmallScreen || !showSearch" class="absolute-center flex">       
+      <!-- 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
@@ -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,7 +249,6 @@ function toggleLanguage() {
   @apply bg-[#903175] text-gray-200;
 }
 
-/* Explorer & feed others */
 .absolute-center {
   position: absolute;
   left: 50%;
@@ -242,7 +258,27 @@ function toggleLanguage() {
   align-items: center;
 }
 
-/* Explorer & feed center mobile */
+.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%;