diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/Navbar.vue | 25 |
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' } ] } } |