Side menu interaction added, condition of use moved.

src/views/main/Header.vue

@@ -1,129 +1,74 @@
 <template>
-
-  <header class="py-1 flex items-center justify-between bg-white shadow-md shadow-gray-700 z-20">
-
-    <div v-if="showPopup"
-         ref="popupRef"
-         class="bg-white shadow-md shadow-gray-700 top-14 left-0 absolute z-50 rounded-br-2xl border-t-2 border-gray-800"
-         @mouseleave="handleMouseLeave"
-         @mouseenter="handleMouseEnter">
-      <SiteMenu></SiteMenu>
-    </div>
-
+  <header
+      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="drawer = !drawer">
+      <v-app-bar-nav-icon @click.stop="toggleSidebar">
       </v-app-bar-nav-icon>
 
       <RouterLink to="/">
-        <v-img src="/medias/hutopy.png"
-               ref="popupButtonRef"
-               alt="Hutopy Logo"
-               class="mr-2 h-10 w-20"
-               @mouseenter="togglePopup(true)">
-        </v-img>
+        <v-img
+            src="/medias/hutopy.png"
+            ref="popupButtonRef"
+            alt="Hutopy Logo"
+            class="mr-2 h-10 w-20"
+        ></v-img>
       </RouterLink>
     </div>
 
-
     <div class="flex items-center">
       <v-text-field
-          density=compact
+          density="compact"
           rounded
           variant="outlined"
           v-model="searchQuery"
           placeholder="Search"
           hide-details
           clearable
-          class="rounded-full mx-2 w-80 "
+          class="rounded-full mx-2 w-80"
           append-inner-icon="mdi-magnify"
-          @click:append-inner="onSearch">
-      </v-text-field>
+          @click:append-inner="onSearch"
+      ></v-text-field>
 
       <v-icon class="mx-2">mdi-bell-outline</v-icon>
 
       <span class="flex items-center mx-2">
-        
-      <span class="text-black text-base font-sans font-medium mr-3">
-      {{ currentUserName }}
-      </span>
-  
-      <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
-           class="rounded-circle h-10 w-10"
-           alt="Logo"/>        
-      </span>
+        <span class="text-black text-base font-sans font-medium mr-3">
+          {{ currentUserName }}
+        </span>
 
+        <img
+            src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
+            class="rounded-circle h-10 w-10"
+            alt="Logo"
+        />
+      </span>
     </div>
-
   </header>
-
 </template>
 
-
 <script setup>
-import {ref, onMounted, onUnmounted} from 'vue';
-import {useRouter} from 'vue-router';
-import SiteMenu from "@/views/main/SiteMenu.vue";
+import { ref } from "vue";
+import { eventBus } from '@/eventBus.js';
 
+const currentUserName = "Jo Bumble";
+const searchQuery = ref("");
 
-const showPopup = ref(false);
-const popupRef = ref(null);
-const popupButtonRef = ref(null);
-let mouseLeaveTimeout = null;
-
-const togglePopup = (state) => {
-  clearTimeout(mouseLeaveTimeout)
-  showPopup.value = state
+const toggleSidebar = () => {
+  eventBus.value.toggleSidebar();
 };
 
-// Function to handle mouse enter event
-const handleMouseEnter = () => {
-  clearTimeout(mouseLeaveTimeout);
-};
-
-// Function to handle mouse leave event
-const handleMouseLeave = () => {
-  mouseLeaveTimeout = setTimeout(() => {
-    showPopup.value = false;
-  }, 200);
-};
-
-// Add event listener for clicks outside the popup when component is mounted
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-});
-
-// Remove event listener when component is unmounted
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-});
-
-// Function to handle clicks outside the popup
-const handleClickOutside = (event) => {
-  if (popupRef.value
-      && !popupRef.value.contains(event.target)
-      && popupButtonRef.value
-      && !popupButtonRef.value.contains(event.target)) {
-    showPopup.value = false;
-  }
-};
-
-
-const currentUserName = 'Jo Bumble'
-const searchQuery = ref('');
-const router = useRouter();
-
 const onSearch = () => {
   const query = searchQuery.value.trim();
-
   if (!query) {
-    router.push('/browse');
+    router.push("/browse");
   } else {
-    const words = query.split(' ');
-
+    const words = query.split(" ");
     if (words.length === 1) {
       router.push(`/@${words[0]}`);
     } else {
-      router.push({name: 'browse', query: {q: query}});
+      router.push({ name: "browse", query: { q: query } });
     }
   }
 };