feat(presets): add drawer component to base preset (#208)

* feat(drawer): add blank drawer component in base template

* improvement(app-bar): add app bar nav icon component to toggle the drawer component

* refactor(drawer): import and use drawer component in parent layout component

Add drawer property to vuex app state.

* refactor(appbar): suggested fix

* refactor(drawer): suggested fix

* refactor(AppBar): Add comment for imported utilities.

Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com>

* refactor(AppBar): Add placeholder inside navigation drawer.

Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com>

Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com>

Author: ElijahKotyluk

packages/@vuetify/presets/generator/templates/base/src/layouts/default/AppBar.vue

@@ -1,9 +1,17 @@
 <template>
   <v-app-bar app>
+    <v-app-bar-nav-icon @click="drawer = !drawer" />
+
     <v-toolbar-title>Application</v-toolbar-title>
   </v-app-bar>
 </template>
 
 <script>
-  export default { name: 'DefaultAppBar' }
+  // Utilities
+  import { sync  } from 'vuex-pathify'
+
+  export default {
+    name: 'DefaultAppBar',
+    computed: { drawer: sync('app/drawer') },
+  }
 </script>

packages/@vuetify/presets/generator/templates/base/src/layouts/default/Drawer.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-navigation-drawer
+    v-model="drawer"
+    app
+  >
+    <!-- -->
+  </v-navigation-drawer>
+</template>
+
+<script>
+  // Utilities
+  import { sync } from 'vuex-pathify'
+
+  export default {
+    name: 'DefaultDrawer',
+    computed: { drawer: sync('app/drawer') },
+  }
+</script>

packages/@vuetify/presets/generator/templates/base/src/layouts/default/index.vue

@@ -2,6 +2,8 @@
   <v-app>
     <default-app-bar />
 
+    <default-drawer />
+
     <default-view />
   </v-app>
 </template>
@@ -12,6 +14,7 @@
 
     components: {
       DefaultAppBar: () => import('./AppBar'),
+      DefaultDrawer: () => import('./Drawer'),
       DefaultView: () => import('./View'),
     },
   }

packages/@vuetify/presets/generator/templates/base/src/store/modules/app.js

@@ -2,7 +2,9 @@
 import { make } from 'vuex-pathify'
 
 // Data
-const state = {}
+const state = {
+  drawer: null
+}
 
 const mutations = make.mutations(state)