Adds link to creator page in the user menu

src/models/myUserModel.js

@@ -6,6 +6,7 @@ import StoredDataUrlsModel from "@/models/storedDataUrlsModel.js";
 export default class MyUserModel
 {
     id = "";
+    creatorAlias = "";
     firstName = "";
     lastName = "";
     userName = "";

src/views/creators/CreatorPage.vue

@@ -2,12 +2,12 @@
   <div v-if="creator && creator.id">
 
     <creator-banner :creator="creator"></creator-banner>
-    <DonationPopup :creator-id="creator.id"></DonationPopup>
+    <donation-popup :creator-id="creator.id"></donation-popup>
 
     <div class="max-w-[800px] mx-auto flex flex-row justify-center border-l-2 border-r-2 -mt-6 ">
       <div class="w-full mt-20 h-full">
-        <ContentList :creator-id="creator.id">
+        <content-list :creator-id="creator.id">
-        </ContentList>
+        </content-list>
       </div>
     </div>
 
@@ -34,9 +34,7 @@ import {watch, ref, onBeforeMount} from 'vue';
 import {useRoute} from 'vue-router';
 import {useClient} from "@/plugins/api.js";
 import CreatorBanner from "@/views/creators/CreatorBanner.vue";
-import MessageList from "@/views/messages/MessageList.vue";
 import ContentList from "@/views/contents/ContentList.vue";
-import PostMessage from "@/views/messages/PostMessage.vue";
 import DonationPopup from "@/views/main/DonationPopup.vue";
 
 const client = useClient();
@@ -44,7 +42,6 @@ const route = useRoute();
 
 const creator = ref(null);
 const loading = ref(true);
-const tab = ref();
 
 onBeforeMount(async () => {
   setTimeout(() => {
@@ -76,16 +73,3 @@ const fetchCreatorData = async (creatorAlias) => {
 }
 
 </script>
-
-<style scoped>
-
-.shadow-lg {
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
-}
-
-.v-btn--active {
-  background-color: #1976D2;
-  color: white;
-}
-
-</style>

src/views/main/Header.vue

@@ -53,12 +53,12 @@
       <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">
+            <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">
-                 {{ currentUserName }}
+                 {{ currentUser.userName }}
                  </span>
-              <img 
+              <img
-                  :src="currentUser.storedDataUrls.profilePictureUrl" 
+                  :src="currentUser.storedDataUrls.profilePictureUrl"
                   alt="Profile Image"
                   @error="handleProfilePictureError"
                   class="ml-2 rounded-full" style="width: 32px; height: 32px;">
@@ -66,6 +66,7 @@
           </template>
 
           <v-list min-width="200px" class=" align-center mt-3 left-3">
+
             <div v-if="currentUser.userName === 'Anonyme'">
               <v-list-item class="nav-button">
                 <v-list-item-title>
@@ -75,13 +76,15 @@
             </div>
 
             <div v-if="currentUser.userName !== 'Anonyme'">
-              <v-list-item class="nav-button">
+
-                <router-link :to="`/@${currentUserName}`">
+              <v-list-item v-if="currentUser.creatorAlias !== null" class="nav-button">
-                  <v-btn class="w-100 " variant="plain"> {{ currentUserName }}</v-btn>
+                <router-link :to="`/@${currentUser.creatorAlias}`">
+                  <v-btn class="w-100 " variant="plain">@{{ currentUser.creatorAlias }}</v-btn>
                 </router-link>
               </v-list-item>
+
               <v-list-item class="nav-button">
-                <v-list-item-title >
+                <v-list-item-title>
                   <v-btn to="/profile" class="w-100 " variant="plain">Mon profil</v-btn>
                 </v-list-item-title>
               </v-list-item>
@@ -89,7 +92,7 @@
                 <v-list-item-title>
                   <v-btn to="/wallet" class="w-100 " variant="plain"> Portefeuille</v-btn>
                 </v-list-item-title>
-              </v-list-item>            
+              </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>
@@ -113,7 +116,6 @@ import {useUserStore} from "@/stores/user.js";
 import MyUserModel from "@/models/myUserModel.js";
 
 const router = useRouter();
-const currentUserName = ref("Anonyme");
 const searchQuery = ref("");
 const showSearch = ref(false);
 let currentUser = reactive(MyUserModel.getDefaultUser());
@@ -161,10 +163,8 @@ const logout = () => {
   window.location.reload();
 };
 
-onBeforeMount( () => {
+onBeforeMount(() => {
   currentUser = userStore.getCurrentUser();
-  currentUserName.value = currentUser.userName;
-
   document.addEventListener('click', handleClickOutside);
 });