Show project name in the header

frontend/components/organisms/layout/TheHeader.vue

@@ -17,6 +17,16 @@
     >
       doccano
     </v-toolbar-title>
+    <v-btn
+      v-if="isAuthenticated && isIndividualProject"
+      text
+      style="text-transform:none"
+    >
+      <v-icon small class="mr-1">
+        mdi-hexagon-multiple
+      </v-icon>
+      <span> {{ currentProject.name }}</span>
+    </v-btn>
     <div class="flex-grow-1" />
     <the-color-mode-switcher />
     <v-btn
@@ -105,7 +115,12 @@ export default {
 
   computed: {
     ...mapGetters('auth', ['isAuthenticated']),
-    ...mapState('auth', ['username'])
+    ...mapState('auth', ['username']),
+    ...mapGetters('projects', ['currentProject']),
+
+    isIndividualProject() {
+      return this.$route.name.startsWith('projects-id')
+    }
   },
 
   methods: {

frontend/components/organisms/layout/TheSideBar.vue

@@ -1,10 +1,5 @@
 <template>
   <v-list dense>
-    <v-list-item>
-      <h1 style="text-transform:capitalize;">
-        {{ currentProject.name }}
-      </h1>
-    </v-list-item>
     <v-btn
       :to="to"
       color="ms-4 my-1 mb-2 primary text-capitalize"
@@ -37,8 +32,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-
 export default {
   props: {
     link: {
@@ -69,8 +62,7 @@ export default {
   computed: {
     to() {
       return `/projects/${this.$route.params.id}/${this.link}`
-    },
-    ...mapGetters('projects', ['currentProject'])
+    }
   },
 
   methods: {