Many fix and improvements

src/App.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-app v-if="isUserLoaded">
+  <v-app>
     <div class="m-0 flex flex-column h-screen">
-      <Header @toggle-sidebar="toggleSidebar" class="fixed w-full z-50 top-0 p-2"></Header>
+      <Header class="fixed w-full z-50 top-0 p-2"></Header>
       <div class="flex flex-row relative">
         <div
             @mouseenter="openSidebar"
@@ -10,7 +10,7 @@
         ></div>
 
         <transition name="slide-fade">
-          <div v-show="!hideSideBar"
+          <div v-show="sideBarStore.visible"
                @mouseleave="startCloseSidebarTimer"
                @mouseenter="clearCloseSidebarTimer"
                class=" fixed h-full min-w-60 border-r-2 bg-white  z-30 transition-transform duration-700">
@@ -31,38 +31,24 @@
 import Header from "@/views/main/Header.vue";
 import Footer from "@/views/main/Footer.vue";
 import SideBar from "@/views/main/SideBar.vue";
-import {ref, onMounted, onUnmounted, onBeforeMount} from 'vue';
-import {eventBus} from '@/eventBus.js';
-import {useUserStore} from "@/stores/user.js";
-import {useClient} from "@/plugins/api.js";
+import {ref, onMounted, onUnmounted} from 'vue';
+import {useSideBarStore} from "@/stores/sideBarStore.js";
 
-const hideSideBar = ref(true);
-const isUserLoaded = ref(false);
 const showPopup = ref(false);
 const popup = ref(null);
 const popupButton = ref(null);
 let closeSidebarTimer = null;
 
-let client = useClient();
-let userStore = useUserStore();
-
-onBeforeMount(async () => {
-  await userStore.setCurrentUser(client);
-  isUserLoaded.value = true;
-});
-
-const toggleSidebar = () => {
-  hideSideBar.value = !hideSideBar.value;
-};
+const sideBarStore = useSideBarStore()
 
 const openSidebar = () => {
   clearCloseSidebarTimer();
-  hideSideBar.value = false;
+  sideBarStore.show()
 };
 
 const startCloseSidebarTimer = () => {
   closeSidebarTimer = setTimeout(() => {
-    hideSideBar.value = true;
+    sideBarStore.hide()
   }, 500);
 };
 
@@ -83,18 +69,16 @@ const handleClickOutside = (event) => {
       !event.target.closest('.w-48') &&
       !event.target.closest('.v-app-bar-nav-icon')
   ) {
-    hideSideBar.value = true;
+    sideBarStore.hide()
   }
 };
 
 onMounted(() => {
   document.addEventListener('click', handleClickOutside);
-  eventBus.value.toggleSidebar = toggleSidebar;
 });
 
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside);
-  eventBus.value.toggleSidebar = null;
 });
 </script>