feat: #3

client/assets/overrides.sass

@@ -0,0 +1,12 @@
+.v-application
+  .primary--text
+    color: #6B38FB !important
+    caret-color: #6B38FB !important
+
+  a
+    cursor: pointer
+    color: rgba(0, 0, 0, 0.87)
+    background-color: transparent
+
+.v-list-item--active
+  color: $active-color!important

client/assets/variables.scss

@@ -2,3 +2,4 @@
 //
 // The variables you want to modify
 // $font-size-root: 20px;
+$active-color: #6B38FB;

client/layouts/default.vue

@@ -1,65 +1,64 @@
 <template>
   <v-app dark>
+    <v-app-bar
+      color="primary"
+      :clipped-left="$vuetify.breakpoint.lgAndUp"
+      clipped-right
+      app
+    >
+      <v-app-bar-nav-icon @click.stop="toggleDrawer" />
+      <v-toolbar-title
+        style="width: 300px"
+        class="ml-0 pl-4"
+        @click="$router.push('/')"
+      >
+        <span class="hidden-sm-and-down">{{ title }}</span>
+      </v-toolbar-title>
+      <v-spacer />
+      <v-menu
+        offset-y
+        transition="scroll-y-transition"
+        :close-on-click="true"
+        :close-on-content-click="true"
+      >
+        <template v-slot:activator="{ on }">
+          <v-btn icon large class="mr-1" v-on="on">
+            <v-avatar size="38px" item>
+              <v-icon dark x-large>mdi-account-circle</v-icon>
+            </v-avatar>
+          </v-btn>
+        </template>
+        <v-list dense>
+          <v-list-item
+            v-for="(item, index) in avatarMenuItems"
+            :key="index"
+            @click="avatarMenuItemClick(item.href)"
+          >
+            <v-list-item-action>
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ item.text }}
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-app-bar>
     <v-navigation-drawer
       v-model="drawer"
-      :mini-variant="miniVariant"
-      :clipped="clipped"
-      fixed
+      :clipped="$vuetify.breakpoint.lgAndUp"
       app
     >
-      <v-list>
-        <v-list-item
-          v-for="(item, i) in items"
-          :key="i"
-          :to="item.to"
-          router
-          exact
-        >
-          <v-list-item-action>
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title v-text="item.title" />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
     </v-navigation-drawer>
-    <v-app-bar :clipped-left="clipped" fixed app>
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
-      <v-btn icon @click.stop="miniVariant = !miniVariant">
-        <v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
-      </v-btn>
-      <v-btn icon @click.stop="clipped = !clipped">
-        <v-icon>mdi-application</v-icon>
-      </v-btn>
-      <v-btn icon @click.stop="fixed = !fixed">
-        <v-icon>mdi-minus</v-icon>
-      </v-btn>
-      <v-toolbar-title v-text="title" />
-      <v-spacer />
-      <v-btn icon @click.stop="rightDrawer = !rightDrawer">
-        <v-icon>mdi-menu</v-icon>
-      </v-btn>
-    </v-app-bar>
     <v-content>
       <v-container>
         <nuxt />
       </v-container>
     </v-content>
-    <v-navigation-drawer v-model="rightDrawer" :right="right" temporary fixed>
-      <v-list>
-        <v-list-item @click.native="right = !right">
-          <v-list-item-action>
-            <v-icon light>
-              mdi-repeat
-            </v-icon>
-          </v-list-item-action>
-          <v-list-item-title>Switch drawer (click me)</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-footer :fixed="fixed" app>
-      <span>&copy; {{ new Date().getFullYear() }}</span>
+    <v-footer app>
+      <span>&copy; {{ new Date().getFullYear() }} {{ author }}</span>
     </v-footer>
   </v-app>
 </template>
@@ -68,25 +67,27 @@
 export default {
   data() {
     return {
-      clipped: false,
-      drawer: false,
-      fixed: false,
-      items: [
-        {
-          icon: 'mdi-apps',
-          title: 'Welcome',
-          to: '/'
-        },
-        {
-          icon: 'mdi-chart-bubble',
-          title: 'Inspire',
-          to: '/inspire'
-        }
+      drawer: null,
+      title: 'GDrive Manager',
+      avatarMenuItems: [
+        { icon: 'mdi-logout', text: 'Logout', href: '/logout' }
       ],
-      miniVariant: false,
-      right: true,
-      rightDrawer: false,
-      title: 'Vuetify.js'
+      author: 'Kumanote,LLC.'
+    }
+  },
+  methods: {
+    toggleDrawer() {
+      this.drawer = !this.drawer
+    },
+    avatarMenuItemClick(href) {
+      switch (href) {
+        case '/logout':
+          window.alert('TODO implement logout')
+          break
+        default:
+          this.$router.push(href)
+          break
+      }
     }
   }
 }

client/nuxt.config.js

@@ -26,7 +26,7 @@ export default {
   /*
    ** Global CSS
    */
-  css: [],
+  css: [{ src: '~/assets/overrides.sass', lang: 'sass' }],
   /*
    ** Plugins to load before mounting the App
    */
@@ -63,16 +63,15 @@ export default {
   vuetify: {
     customVariables: ['~/assets/variables.scss'],
     theme: {
-      dark: true,
+      dark: false,
       themes: {
+        light: {
+          primary: '#FFFFFF',
+          secondary: '#6B38FB'
+        },
         dark: {
-          primary: colors.blue.darken2,
-          accent: colors.grey.darken3,
-          secondary: colors.amber.darken3,
-          info: colors.teal.lighten1,
-          warning: colors.amber.base,
-          error: colors.deepOrange.accent4,
-          success: colors.green.accent3
+          primary: '#FFFFFF',
+          secondary: '#6B38FB'
         }
       }
     }

client/pages/index.vue

@@ -1,75 +1,17 @@
 <template>
-  <v-layout column justify-center align-center>
-    <v-flex xs12 sm8 md6>
-      <div class="text-center">
-        <logo />
-        <vuetify-logo />
-      </div>
-      <v-card>
-        <v-card-title class="headline">
-          Welcome to the Vuetify + Nuxt.js template
-        </v-card-title>
-        <v-card-text>
-          <p>
-            Vuetify is a progressive Material Design component framework for
-            Vue.js. It was designed to empower developers to create amazing
-            applications.
-          </p>
-          <p>
-            For more information on Vuetify, check out the
-            <a href="https://vuetifyjs.com" target="_blank"> documentation </a>.
-          </p>
-          <p>
-            If you have questions, please join the official
-            <a href="https://chat.vuetifyjs.com/" target="_blank" title="chat">
-              discord </a
-            >.
-          </p>
-          <p>
-            Find a bug? Report it on the github
-            <a
-              href="https://github.com/vuetifyjs/vuetify/issues"
-              target="_blank"
-              title="contribute"
-            >
-              issue board </a
-            >.
-          </p>
-          <p>
-            Thank you for developing with Vuetify and I look forward to bringing
-            more exciting features in the future.
-          </p>
-          <div class="text-xs-right">
-            <em><small>&mdash; John Leider</small></em>
-          </div>
-          <hr class="my-3" />
-          <a href="https://nuxtjs.org/" target="_blank">
-            Nuxt Documentation
-          </a>
-          <br />
-          <a href="https://github.com/nuxt/nuxt.js" target="_blank">
-            Nuxt GitHub
-          </a>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn color="primary" nuxt to="/inspire">
-            Continue
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-flex>
-  </v-layout>
+  <v-row justify="center">
+    <v-col cols="12" md="8">
+      <p class="display-1">{{ title }}</p>
+    </v-col>
+  </v-row>
 </template>
 
 <script>
-import Logo from '~/components/Logo.vue'
-import VuetifyLogo from '~/components/VuetifyLogo.vue'
-
 export default {
-  components: {
-    Logo,
-    VuetifyLogo
+  data() {
+    return {
+      title: '[第３回]Nuxt.js＋Vuetifyでレイアウトを整える'
+    }
   }
 }
 </script>