Many fix and improvements

src/views/main/Header.vue

@@ -4,7 +4,7 @@
       @click.stop
   >
     <div class="flex items-center">
-      <v-app-bar-nav-icon @click.stop="toggleSidebar">
+      <v-app-bar-nav-icon @click.stop="sideBarStore.toggle()">
       </v-app-bar-nav-icon>
 
       <RouterLink to="/" class="hidden md:block">
@@ -53,51 +53,52 @@
       <div class="text-center">
         <v-menu open-on-hover>
           <template v-slot:activator="{ props }">
-            <v-btn variant="plain" v-bind="props" class="d-flex align-center text-capital-none">
-                 <span class="normal-case max-w-xs  hidden md:block">
-                 {{ currentUser.userName }}
-                 </span>
+            <div v-bind="props" class="flex align-center font-sans py-1 px-4 rounded-lg hover:bg-gray-100">
+              <span class="max-w-xs  hidden md:block">
+                {{ userStore.alias }}
+              </span>
               <img
-                  :src="currentUser.storedDataUrls.profilePictureUrl ?? '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
+                  :src="userStore.portraitUrl"
                   alt="Profile Image"
-                  class="ml-2 rounded-full" style="width: 32px; height: 32px;">
-            </v-btn>
+                  class="ml-2 rounded-full"
+                  width="32"
+                  height="32">
+            </div>
           </template>
 
           <v-list min-width="200px" class=" align-center mt-3 left-3">
 
-            <div v-if="currentUser.userName === 'Anonyme'">
+            <template v-if="!authStore.isAuthenticated">
               <v-list-item class="nav-button">
                 <v-list-item-title>
                   <v-btn to="/login" class="w-100 " variant="plain">Connexion</v-btn>
                 </v-list-item-title>
               </v-list-item>
-            </div>
+            </template>
 
-            <div v-if="currentUser.userName !== 'Anonyme'">
-
-              <v-list-item v-if="currentUser.creatorAlias !== null" class="nav-button">
-                <router-link :to="`/@${currentUser.creatorAlias}`">
-                  <v-btn class="w-100 " variant="plain">@{{ currentUser.creatorAlias }}</v-btn>
+            <template v-else>
+              <v-list-item v-if="userStore.creator" class="nav-button">
+                <router-link :to="`/@${userStore.creator.name}`">
+                  <v-btn class="w-100 " variant="plain">@{{ userStore.creator.name }}</v-btn>
                 </router-link>
               </v-list-item>
 
               <v-list-item class="nav-button">
                 <v-list-item-title>
-                  <v-btn to="/profile" class="w-100 " variant="plain">Mon profil</v-btn>
+                  <v-btn to="/profile" class="w-100" variant="plain">Mon profil</v-btn>
                 </v-list-item-title>
               </v-list-item>
               <v-list-item class="nav-button">
                 <v-list-item-title>
-                  <v-btn to="/wallet" class="w-100 " variant="plain"> Portefeuille</v-btn>
+                  <v-btn to="/wallet" class="w-100" variant="plain">Portefeuille</v-btn>
                 </v-list-item-title>
               </v-list-item>
               <v-list-item class="nav-button">
                 <v-list-item-title>
-                  <v-btn @click="logout" to="/wallet" class="w-100 " variant="plain"> Déconnexion</v-btn>
+                  <v-btn @click="authStore.logout" class="w-100" variant="plain">Déconnexion</v-btn>
                 </v-list-item-title>
               </v-list-item>
-            </div>
+            </template>
           </v-list>
         </v-menu>
       </div>
@@ -108,21 +109,19 @@
 </template>
 
 <script setup>
-import {ref, onBeforeUnmount, onBeforeMount, watch, reactive} from "vue";
-import {eventBus} from '@/eventBus.js';
+import {ref, onBeforeUnmount, onBeforeMount, watch} from "vue";
 import {useRouter} from 'vue-router';
-import {useUserStore} from "@/stores/user.js";
-import MyUserModel from "@/models/myUserModel.js";
+import {useSideBarStore} from '@/stores/sideBarStore.js';
+import {useUserStore} from "@/stores/userStore.js";
+import {useAuthStore} from "@/stores/authStore.js";
+
+const authStore = useAuthStore()
+const userStore = useUserStore()
+const sideBarStore = useSideBarStore()
 
 const router = useRouter();
 const searchQuery = ref("");
 const showSearch = ref(false);
-let currentUser = reactive(MyUserModel.getDefaultUser());
-const userStore = useUserStore();
-
-const toggleSidebar = () => {
-  eventBus.value.toggleSidebar();
-};
 
 const onSearch = () => {
   const query = searchQuery.value.trim();
@@ -148,33 +147,14 @@ const handleClickOutside = (event) => {
   }
 };
 
-const navigateToMessages = () => {
-  router.push('/messages');
-};
-
-const logout = () => {
-  localStorage.removeItem('jwt');
-  window.location.reload();
-};
-
 onBeforeMount(() => {
-  currentUser = userStore.getCurrentUser();
-  document.addEventListener('click', handleClickOutside);
+  document.addEventListener('click', handleClickOutside)
 });
 
-// Watch the user state to get it again if needed.
-watch(
-    () => userStore.hasChanged,
-    () => {
-      currentUser = userStore.getCurrentUser();
-      const timestamp = new Date().getTime();
-      currentUser.storedDataUrls.profilePictureUrl = `${currentUser.storedDataUrls.profilePictureUrl}?t=${timestamp}`;
-    }
-);
-
 onBeforeUnmount(() => {
   document.removeEventListener('click', handleClickOutside);
 });
+
 </script>