Made navbar responsive

1 files changed, 22 insertions, 3 deletions

diff --git a/components/Navbar.vue b/components/Navbar.vue
index fd559db..6795752 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -3,7 +3,12 @@
         <v-app-bar>
             <v-toolbar-title>Andrew Lee</v-toolbar-title>
             <v-spacer/>
-            <v-toolbar-items>
+
+            <span class="hidden-sm-and-up">
+            <v-btn @click.stop="drawer = !drawer">Menu</v-btn>
+            </span>
+
+            <v-toolbar-items class="hidden-xs-only">
             <v-btn to="/" text>
                 Home
             </v-btn>
@@ -15,6 +20,20 @@
             </v-btn>
             </v-toolbar-items>
         </v-app-bar>
+
+        <v-navigation-drawer v-model="drawer" absolute temporary left>
+          <v-list dense>
+          <v-list-item v-for="item in items" :key="item.title" :to="item.link" link>
+          <v-list-item-icon>
+            <v-icon>mdi-{{ item.icon }}</v-icon>
+          </v-list-item-icon>
+
+          <v-list-item-content>
+              <v-list-item-title>{{ item.title }}</v-list-item-title>
+          </v-list-item-content>
+          </v-list-item>
+          </v-list>
+        </v-navigation-drawer>
     </div>
 </template>
 
@@ -26,8 +45,8 @@ export default {
       drawer: false,
       items: [
         { title: 'Home', link: '/', icon: 'home' },
-        { title: 'Blog', link: 'store', icon: 'blog' },
-        { title: 'Projects', link: 'cart', icon: 'projects' }
+        { title: 'Blog', link: 'blog', icon: 'blog' },
+        { title: 'Projects', link: 'projects', icon: 'projects' }
       ]
     }
   }