feat(layout): add navigation draw

shadow81627 · Dec 9, 2019 · da6506b · da6506b
1 parent b2ff1c0
commit da6506b
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 4 deletions.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,11 +1,40 @@
 <template>
   <v-app id="inspire" :dark="isDark" clipped-left>
+    <v-navigation-drawer
+      v-model="drawer"
+      :clipped="$vuetify.breakpoint.lgAndUp"
+      app
+      class="hidden-print-only"
+    >
+      <v-list dense>
+        <v-list-item
+          v-for="item in items"
+          :key="item.text"
+          :to="localePath(item.route ? item.route : {})"
+          active-class="btn-primary pointer-events-none active"
+          nuxt
+          class="text-decoration-none"
+        >
+          <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-navigation-drawer>
     <v-app-bar
       :clipped-left="$vuetify.breakpoint.lgAndUp"
       app
       fixed
       class="hidden-print-only navbar-dark bg-dark"
     >
+      <v-app-bar-nav-icon
+        aria-label="menu"
+        dark
+        @click.stop="drawer = !drawer"
+      />
       <v-toolbar-title style="width: 256px" class="ml-0 pl-3">
         <!-- <v-app-bar-nav-icon aria-label="menu" @click.stop="drawer = !drawer" /> -->
         <!-- <b-img-lazy
@@ -35,14 +64,25 @@ export default {
   },
   data() {
     return {
-      dialog: false,
       drawer: false,
+      items: [
+        {
+          icon: 'home',
+          text: 'Home',
+          route: 'index',
+        },
+        {
+          icon: 'info',
+          text: 'Blog',
+          route: 'blog',
+        },
+      ],
     };
   },
   computed: {
-    items() {
-      return [];
-    },
+    // items() {
+    //   return [];
+    // },
     isDark() {
       return false;
       // return this.$store.getters.getCurrentTheme().dark;

diff --git a/vuetify.options.js b/vuetify.options.js
@@ -12,6 +12,7 @@ import {
   mdiMapMarker,
   mdiViewList,
   mdiViewComfy,
+  mdiHome,
 } from '@mdi/js';
 
 // vuetify.options.js
@@ -40,6 +41,7 @@ export default {
       place: mdiMapMarker,
       list: mdiViewList,
       view_comfy: mdiViewComfy,
+      home: mdiHome,
     },
   },
   // lang: {},