Use common header in all layouts

frontend/components/organisms/FeatureCards.vue

@@ -49,17 +49,17 @@ export default {
         {
           imageSrc: '/images/feature3.png',
           title: 'Team Collaboration',
-          text: 'Annotation with your team mates.'
+          text: 'Annotation with your team mates'
         },
         {
           imageSrc: '/images/feature2.png',
           title: 'Any Language',
-          text: 'Annotation with any language.'
+          text: 'Annotation with any language'
         },
         {
           imageSrc: '/images/feature1.png',
           title: 'Open Source',
-          text: 'Annotation with free and customizable.'
+          text: 'Annotation with free and customizable'
         }
       ]
     }

frontend/components/organisms/TheHeader.vue

@@ -1,5 +1,9 @@
 <template>
-  <v-app-bar app>
+  <v-app-bar
+    app
+    clipped-left
+  >
+    <slot name="leftDrawerIcon" />
     <nuxt-link to="/" style="line-height:0;">
       <img src="~/assets/icon.png" height="48">
     </nuxt-link>

frontend/layouts/annotation.vue

@@ -1,34 +1,32 @@
 <template>
-  <base-layout>
-    <template #leftDrawerIcon>
-      <v-app-bar-nav-icon @click="drawerLeft = !drawerLeft" />
-    </template>
+  <v-app>
+    <the-header>
+      <template #leftDrawerIcon>
+        <v-app-bar-nav-icon @click="drawerLeft = !drawerLeft" />
+      </template>
+    </the-header>
 
-    <template #leftDrawer>
-      <v-navigation-drawer
-        v-model="drawerLeft"
-        app
-        clipped
-        color=""
-      >
-        <the-side-bar />
-      </v-navigation-drawer>
-    </template>
+    <v-navigation-drawer
+      v-model="drawerLeft"
+      app
+      clipped
+      color=""
+    >
+      <the-side-bar />
+    </v-navigation-drawer>
 
-    <template #content>
-      <nuxt />
-    </template>
-  </base-layout>
+    <nuxt />
+  </v-app>
 </template>
 
 <script>
-import BaseLayout from '~/layouts/BaseLayout'
 import TheSideBar from '~/components/organisms/TheSideBar'
+import TheHeader from '~/components/organisms/TheHeader'
 
 export default {
   components: {
-    BaseLayout,
-    TheSideBar
+    TheSideBar,
+    TheHeader
   },
   data() {
     return {

frontend/layouts/demo.vue

@@ -1,17 +1,16 @@
 <template>
-  <base-layout>
-    <template #content>
-      <nuxt />
-    </template>
-  </base-layout>
+  <v-app>
+    <the-header />
+    <nuxt />
+  </v-app>
 </template>
 
 <script>
-import BaseLayout from '~/layouts/BaseLayout'
+import TheHeader from '~/components/organisms/TheHeader'
 
 export default {
   components: {
-    BaseLayout
+    TheHeader
   }
 }
 </script>

frontend/layouts/project.vue

@@ -1,47 +1,45 @@
 <template>
-  <base-layout>
-    <template #leftDrawerIcon>
-      <v-app-bar-nav-icon @click="drawerLeft = !drawerLeft" />
-    </template>
+  <v-app>
+    <the-header>
+      <template #leftDrawerIcon>
+        <v-app-bar-nav-icon @click="drawerLeft = !drawerLeft" />
+      </template>
+    </the-header>
 
-    <template #leftDrawer>
-      <v-navigation-drawer
-        v-model="drawerLeft"
-        app
-        clipped
-        color=""
-      >
-        <the-side-bar />
-      </v-navigation-drawer>
-    </template>
+    <v-navigation-drawer
+      v-model="drawerLeft"
+      app
+      clipped
+      color=""
+    >
+      <the-side-bar />
+    </v-navigation-drawer>
 
-    <template #content>
-      <v-content>
-        <v-container
-          fluid
-          fill-height
+    <v-content>
+      <v-container
+        fluid
+        fill-height
+      >
+        <v-layout
+          justify-center
         >
-          <v-layout
-            justify-center
-          >
-            <v-flex fill-height>
-              <nuxt />
-            </v-flex>
-          </v-layout>
-        </v-container>
-      </v-content>
-    </template>
-  </base-layout>
+          <v-flex fill-height>
+            <nuxt />
+          </v-flex>
+        </v-layout>
+      </v-container>
+    </v-content>
+  </v-app>
 </template>
 
 <script>
-import BaseLayout from '~/layouts/BaseLayout'
 import TheSideBar from '~/components/organisms/TheSideBar'
+import TheHeader from '~/components/organisms/TheHeader'
 
 export default {
   components: {
-    BaseLayout,
-    TheSideBar
+    TheSideBar,
+    TheHeader
   },
   data: () => ({
     drawerLeft: false

frontend/layouts/projects.vue

@@ -1,30 +1,29 @@
 <template>
-  <base-layout>
-    <template #content>
-      <v-content>
-        <v-container
-          fluid
-          fill-height
+  <v-app>
+    <the-header />
+    <v-content>
+      <v-container
+        fluid
+        fill-height
+      >
+        <v-layout
+          justify-center
         >
-          <v-layout
-            justify-center
-          >
-            <v-flex>
-              <nuxt />
-            </v-flex>
-          </v-layout>
-        </v-container>
-      </v-content>
-    </template>
-  </base-layout>
+          <v-flex>
+            <nuxt />
+          </v-flex>
+        </v-layout>
+      </v-container>
+    </v-content>
+  </v-app>
 </template>
 
 <script>
-import BaseLayout from '~/layouts/BaseLayout'
+import TheHeader from '~/components/organisms/TheHeader'
 
 export default {
   components: {
-    BaseLayout
+    TheHeader
   }
 }
 </script>