92 lines
2.2 KiB
Vue
92 lines
2.2 KiB
Vue
<template>
|
|
<v-app>
|
|
<v-navigation-drawer
|
|
persistent
|
|
:mini-variant="miniVariant"
|
|
:clipped="clipped"
|
|
v-model="drawer"
|
|
enable-resize-watcher
|
|
fixed
|
|
app
|
|
>
|
|
<v-list>
|
|
<v-list-tile
|
|
value="true"
|
|
v-for="(item, i) in items"
|
|
:key="i"
|
|
>
|
|
<v-list-tile-action>
|
|
<v-icon v-html="item.icon"></v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title v-text="item.title"></v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
<v-toolbar
|
|
app
|
|
:clipped-left="clipped"
|
|
>
|
|
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
|
|
<v-btn icon @click.stop="miniVariant = !miniVariant">
|
|
<v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
|
|
</v-btn>
|
|
<v-btn icon @click.stop="clipped = !clipped">
|
|
<v-icon>web</v-icon>
|
|
</v-btn>
|
|
<v-btn icon @click.stop="fixed = !fixed">
|
|
<v-icon>remove</v-icon>
|
|
</v-btn>
|
|
<v-toolbar-title v-text="title"></v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-btn icon @click.stop="rightDrawer = !rightDrawer">
|
|
<v-icon>menu</v-icon>
|
|
</v-btn>
|
|
</v-toolbar>
|
|
<v-content>
|
|
<router-view/>
|
|
</v-content>
|
|
<v-navigation-drawer
|
|
temporary
|
|
:right="right"
|
|
v-model="rightDrawer"
|
|
fixed
|
|
app
|
|
>
|
|
<v-list>
|
|
<v-list-tile @click="right = !right">
|
|
<v-list-tile-action>
|
|
<v-icon>compare_arrows</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
|
|
</v-list-tile>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
<v-footer :fixed="fixed" app>
|
|
<span>© 2017</span>
|
|
</v-footer>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
clipped: false,
|
|
drawer: true,
|
|
fixed: false,
|
|
items: [{
|
|
icon: 'bubble_chart',
|
|
title: 'Inspire',
|
|
}],
|
|
miniVariant: false,
|
|
right: true,
|
|
rightDrawer: false,
|
|
title: 'Vuetify.js',
|
|
};
|
|
},
|
|
name: 'App',
|
|
};
|
|
</script>
|