profile navbar improvement

Author: Resul Avan

src/components/navbar/ProfileNavigator.vue

@@ -1,13 +1,5 @@
 <template>
   <b-navbar-dropdown :boxed="true" :close-on-click="true">
-
-    <template slot="label" class="is-grouped">
-      <b-field>
-        <BackgroundSquareImage :image-url="profilePhoto" size="28" rounded="true"/>
-        <span class="has-margin-left-5"><b>{{ authUser.name || authUser.email }}</b></span>
-      </b-field>
-    </template>
-
     <b-navbar-item tag="router-link" :to="dynamicProfileRoute">
       <b-icon pack="fas" icon="user" class="has-margin-right-5"/>
       <p>{{$t('topNavbar.profileDynamic')}}</p>
@@ -30,22 +22,17 @@
 
 <script lang="ts">
   import { Component, Prop, Vue } from 'nuxt-property-decorator';
-  import { AuthUser, DefaultProfilePhoto, Routes } from "~/types";
-  import BackgroundSquareImage from '~/components/image/BackgroundSquareImage.vue';
+  import { AuthUser, Routes } from "~/types";
   import { getUserRoute } from '~/service/global-service';
 
   @Component({
-    components: { BackgroundSquareImage }
+    components: {}
   })
   export default class ProfileNavigator extends Vue {
 
     @Prop({ required: true }) authUser !: AuthUser;
     @Prop({ type: Function, required: true }) logout !: () => void;
 
-    get profilePhoto() {
-      return this.authUser?.profilePhoto?.src || DefaultProfilePhoto.src
-    }
-
     get profileRoute() {
       return Routes.PROFILE
     }

src/components/navbar/TopNavbar.vue

@@ -40,6 +40,13 @@
 
       <LanguageSwitcher/>
 
+
+      <b-navbar-item v-if="authUser" tag="router-link" :to="dynamicProfileRoute">
+        <b-field>
+          <BackgroundSquareImage :image-url="profilePhoto" size="28" rounded="true"/>
+          <span class="has-margin-left-5"><b>{{ authUser.name || authUser.email }}</b></span>
+        </b-field>
+      </b-navbar-item>
       <ProfileNavigator v-if="authUser" :auth-user="authUser" :logout="logout"/>
 
       <b-navbar-item v-else tag="div">
@@ -64,14 +71,16 @@
 
 <script lang="ts">
   import { Component, Vue } from 'nuxt-property-decorator';
-  import { AuthUser, Routes, StateNamespace } from "~/types";
+  import { AuthUser, DefaultProfilePhoto, Routes, StateNamespace } from "~/types";
   import LanguageSwitcher from "~/components/navbar/LanguageSwitcher.vue";
   import ProfileNavigator from "~/components/navbar/ProfileNavigator.vue";
   import Logo from '~/components/navbar/Logo.vue';
   import SearchBar from '~/components/navbar/SearchBar.vue';
+  import { getUserRoute } from '~/service/global-service';
+  import BackgroundSquareImage from '~/components/image/BackgroundSquareImage.vue';
 
   @Component({
-    components: { SearchBar, Logo, ProfileNavigator, LanguageSwitcher }
+    components: { BackgroundSquareImage, SearchBar, Logo, ProfileNavigator, LanguageSwitcher }
   })
   export default class TopNavbar extends Vue {
 
@@ -82,5 +91,13 @@
       return Routes
     }
 
+    get dynamicProfileRoute() {
+      return getUserRoute(Routes.PROFILE_DYNAMIC, this.authUser.username)
+    }
+
+    get profilePhoto() {
+      return this.authUser?.profilePhoto?.src || DefaultProfilePhoto.src
+    }
+
   }
 </script>