From 8cf9eddb5c9749b818b91c00c84c55fbe8f638e5 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Fri, 30 Aug 2024 09:43:12 -0400
Subject: [PATCH] Fixe search mobile.

---
 src/views/main/Header.vue | 118 +++++++++++++++++++++-----------------
 1 file changed, 66 insertions(+), 52 deletions(-)

diff --git a/src/views/main/Header.vue b/src/views/main/Header.vue
index 43d0029..b575379 100644
--- a/src/views/main/Header.vue
+++ b/src/views/main/Header.vue
@@ -3,6 +3,7 @@
       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>
@@ -24,68 +25,71 @@
             class="mr-2 h-10 w-20"
         ></v-img>
       </RouterLink>
-      
     </div>
 
-    <!-- Spacer to push the Explorer button to the center -->
-    <div class="flex-grow"></div>
+   
+    <div class="flex-grow flex items-center justify-center relative">    
+      <div v-if="showSearch || !isSmallScreen" class="flex-grow flex justify-center items-center" :class="{'w-full': isSmallScreen && showSearch}">
+        <template v-if="showSearch">
+          <v-text-field
+              density="compact"
+              rounded
+              variant="outlined"
+              v-model="searchQuery"
+              placeholder="Recherche"
+              hide-details
+              clearable
+              class="rounded-full w-full sm:w-full md:w-full lg:w-96 mx-2"
+              append-inner-icon="mdi-magnify"
+              @click.stop
+              @click:append-inner="onSearch"
+              @keyup.enter="onSearch"
+          >
+          </v-text-field>
+        </template>
+      </div>
 
-
-    <!-- FEED -->
-    <v-btn
-        v-if="authStore.isAuthenticated"
-        variant="plain"
-        icon
-        class="flex flex-row justify-center"
-        @click="feedHandler"
-    >
-      <v-icon>mdi-television</v-icon>
-    </v-btn>
-
-    <!-- Explorer Button -->
-    <v-btn
-        variant="plain"
-        icon
-        class="flex flex-row justify-center"
-        @click="explorerHandler"
-    >
-      <v-icon>mdi-earth</v-icon>
-    </v-btn>
-
-
-    <!-- Spacer to keep the search bar to the right -->
-    <div class="flex-grow"></div>
-
-    <div class="flex items-center ml-auto space-x-4 search-container">
-      <template v-if="showSearch">
-        <v-text-field
-            density="compact"
-            rounded
-            variant="outlined"
-            v-model="searchQuery"
-            placeholder="Recherche"
-            hide-details
-            clearable
-            class="rounded-full w-32 md:w-64 lg:w-96 mx-2"
-            append-inner-icon="mdi-magnify"
-            @click.stop
-            @click:append-inner="onSearch"
-            @keyup.enter="onSearch"
+      <div v-if="!isSmallScreen || !showSearch" class="absolute-center flex">       
+        <v-btn
+            v-if="authStore.isAuthenticated"
+            variant="plain"
+            icon
+            class="flex flex-row justify-center"
+            @click="feedHandler"
         >
-        </v-text-field>
-      </template>
-      <template v-else>
+          <v-icon>mdi-television</v-icon>
+        </v-btn>
+
+       
+        <v-btn
+            variant="plain"
+            icon
+            class="flex flex-row justify-center"
+            @click="explorerHandler"
+        >
+          <v-icon>mdi-earth</v-icon>
+        </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>
       </template>
 
-      <v-btn variant="text" style="margin:0" @click="toggleLanguage">
+      <v-btn
+          variant="text"
+          class="p-0 mx-0 min-w-0"
+          style="min-width: 24px;"
+          @click="toggleLanguage"
+      >
         {{ selectedLanguage === 'fr' ? 'Fr' : 'En' }}
-      </v-btn>      
+      </v-btn>
 
       <div class="text-center">
         <v-menu open-on-hover>
           <template v-slot:activator="{ props }">
-            <div v-bind="props" class="flex align-center font-sans py-1 px-4 rounded-lg hover:bg-gray-100">
+            <div v-bind="props" class="flex align-center font-sans py-1 px-2 rounded-lg hover:bg-gray-100">
               <span class="max-w-xs hidden md:block">
                 {{ userStore.alias }}
               </span>
@@ -99,7 +103,6 @@
           </template>
 
           <v-list min-width="200px" class="align-center mt-3 left-3">
-
             <template v-if="!authStore.isAuthenticated">
               <v-list-item class="nav-button">
                 <v-list-item-title>
@@ -151,18 +154,22 @@ import { useSideBarStore } from '@/stores/sideBarStore.js';
 import { useUserStore } from "@/stores/userStore.js";
 import { useAuthStore } from "@/stores/authStore.js";
 import { useI18n } from 'vue-i18n';
+import { useDisplay } from 'vuetify';
 
 const { locale } = useI18n();
 const authStore = useAuthStore();
 const userStore = useUserStore();
 const sideBarStore = useSideBarStore();
+const { smAndDown } = useDisplay();
 
 const router = useRouter();
 const searchQuery = ref("");
 const showSearch = ref(false);
+const isSmallScreen = ref(smAndDown.value);
 
 let selectedLanguage = ref(locale.value);
 initializeLocale();
+
 const onSearch = () => {
   const query = searchQuery.value.trim();
   if (!query) {
@@ -215,7 +222,6 @@ function toggleLanguage() {
   selectedLanguage.value = lang;
   localStorage.setItem('preferredLocale', lang);
 }
-
 </script>
 
 <style scoped>
@@ -226,4 +232,12 @@ function toggleLanguage() {
 .nav-button:hover {
   @apply bg-[#903175] text-gray-200;
 }
+.absolute-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
 </style>