Reload header profile picture on change. Show PostContentMenu only if it is the creator own page

src/views/main/Header.vue

@@ -104,16 +104,17 @@
 </template>
 
 <script setup>
-import {ref, onMounted, onBeforeUnmount, onBeforeMount} from "vue";
+import {ref, onBeforeUnmount, onBeforeMount, watch, reactive} from "vue";
 import {eventBus} from '@/eventBus.js';
 import {useRouter} from 'vue-router';
 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);
-const currentUser = ref(null);
+let currentUser = reactive(MyUserModel.getDefaultUser());
 const userStore = useUserStore();
 const backupProfilePictureUrl = "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
 
@@ -159,12 +160,22 @@ const logout = () => {
 };
 
 onBeforeMount( () => {
-  currentUser.value = userStore.getCurrentUser();
-  currentUserName.value = currentUser.value.userName;
+  currentUser = userStore.getCurrentUser();
+  currentUserName.value = currentUser.userName;
 
   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);
 });