From 10a715f62c6f8d59615a5f47f90cc28fd66fdd63 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 22 Oct 2019 20:16:47 +0900
Subject: [PATCH] Use common header in all layouts

---
 .../components/organisms/FeatureCards.vue     |  6 +-
 frontend/components/organisms/TheHeader.vue   |  6 +-
 frontend/layouts/annotation.vue               | 40 ++++++------
 frontend/layouts/demo.vue                     | 13 ++--
 frontend/layouts/project.vue                  | 64 +++++++++----------
 frontend/layouts/projects.vue                 | 37 ++++++-----
 6 files changed, 82 insertions(+), 84 deletions(-)

diff --git a/frontend/components/organisms/FeatureCards.vue b/frontend/components/organisms/FeatureCards.vue
index d1826a17..67802c65 100644
--- a/frontend/components/organisms/FeatureCards.vue
+++ b/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'
         }
       ]
     }
diff --git a/frontend/components/organisms/TheHeader.vue b/frontend/components/organisms/TheHeader.vue
index 82b60c3a..c64855d5 100644
--- a/frontend/components/organisms/TheHeader.vue
+++ b/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>
diff --git a/frontend/layouts/annotation.vue b/frontend/layouts/annotation.vue
index dc4d48bd..01aad7e7 100644
--- a/frontend/layouts/annotation.vue
+++ b/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 {
diff --git a/frontend/layouts/demo.vue b/frontend/layouts/demo.vue
index b6f42cf0..f19a35cd 100644
--- a/frontend/layouts/demo.vue
+++ b/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>
diff --git a/frontend/layouts/project.vue b/frontend/layouts/project.vue
index ff906a79..02803b5b 100644
--- a/frontend/layouts/project.vue
+++ b/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
diff --git a/frontend/layouts/projects.vue b/frontend/layouts/projects.vue
index 72c87989..c2f6f74f 100644
--- a/frontend/layouts/projects.vue
+++ b/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>