aboutsummaryrefslogtreecommitdiff
path: root/layouts/default.vue
diff options
context:
space:
mode:
authorAndrew Lee <alee14498@protonmail.com>2020-05-10 09:24:22 -0400
committerAndrew Lee <alee14498@protonmail.com>2020-05-10 09:24:22 -0400
commitfa3f2d2cd196998bd1d0d09a0c649d7f26500ded (patch)
tree4ce90849ef672a1a8a5d693acb3c0f104bd0f613 /layouts/default.vue
parent69474fee32c62e1b97b9f51b78a2e242542ae9a7 (diff)
downloadProject-NewTube-fa3f2d2cd196998bd1d0d09a0c649d7f26500ded.tar.gz
Project-NewTube-fa3f2d2cd196998bd1d0d09a0c649d7f26500ded.tar.bz2
Project-NewTube-fa3f2d2cd196998bd1d0d09a0c649d7f26500ded.zip
Added the files
Diffstat (limited to 'layouts/default.vue')
-rw-r--r--layouts/default.vue93
1 files changed, 93 insertions, 0 deletions
diff --git a/layouts/default.vue b/layouts/default.vue
new file mode 100644
index 0000000..d48cc8c
--- /dev/null
+++ b/layouts/default.vue
@@ -0,0 +1,93 @@
+<template>
+ <v-app dark>
+ <v-navigation-drawer
+ v-model="drawer"
+ :mini-variant="miniVariant"
+ :clipped="clipped"
+ fixed
+ 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>
+ </v-app>
+</template>
+
+<script>
+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'
+ }
+ ],
+ miniVariant: false,
+ right: true,
+ rightDrawer: false,
+ title: 'Vuetify.js'
+ }
+ }
+}
+</script>