Commit 7f30478a authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion
Browse files

make component for drawer

parent a57dd0f5
<template> <template>
<v-app> <v-app>
<Navbar /> <Navbar/>
<v-content> <v-content>
<router-view></router-view> <router-view></router-view>
......
<template>
<v-navigation-drawer
v-bind:value="value"
v-on:input="$emit('input', $event)"
app width=200 class="primary" dark
>
<v-toolbar flat class="primary">
<v-list>
<v-list-tile>
<v-list-tile-title>
Browse
</v-list-tile-title>
</v-list-tile>
</v-list>
</v-toolbar>
<v-divider></v-divider>
<v-list dense class="pt-0">
<v-list-tile
v-for="item in items"
:key="item.title"
@click=""
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true,
},
value: {
type: Boolean,
default: false,
},
},
};
</script>
<template> <template>
<nav> <nav>
<v-toolbar flat app dark height="50" class="blue-grey darken-4"> <v-toolbar flat app dark height="50" class="primary">
<v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon> <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title class="headline"> <v-toolbar-title class="headline">
<span class="font-weight-light">Metagene</span> <span class="font-weight-light">Metagene</span>
<span>DB</span> <span>DB</span>
</v-toolbar-title> </v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn flat> <v-btn flat>
<span>Sign in</span> <span>Sign in</span>
<v-icon right>exit_to_app</v-icon> <v-icon right>exit_to_app</v-icon>
</v-btn> </v-btn>
<v-btn flat> <v-btn flat>
<span>Help</span> <span>Help</span>
<v-icon right>help</v-icon> <v-icon right>help</v-icon>
</v-btn> </v-btn>
</v-toolbar> </v-toolbar>
<v-navigation-drawer v-model="drawer" app width=200 class="blue-grey darken-4"> <Drawer :items="items" v-model="drawer"/>
<v-toolbar flat dark class="blue-grey darken-4">
<v-list>
<v-list-tile>
<v-list-tile-title>
Browse
</v-list-tile-title>
</v-list-tile>
</v-list>
</v-toolbar>
<v-divider dark></v-divider> </nav>
<v-list dense dark class="pt-0">
<v-list-tile
v-for="item in items"
:key="item.title"
@click=""
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</nav>
</template> </template>
<script> <script>
import Drawer from '@/components/Drawer.vue';
export default { export default {
components: { Drawer },
data() { data() {
return { return {
drawer: false, drawer: false,
items: [ items: [
{ title: 'Home', icon: 'home' }, { title: 'Home', icon: 'home' },
{ title: 'Catalog Statistics', icon: 'bar_chart'}, { title: 'Catalog Statistics', icon: 'bar_chart' },
{ title: 'Genes', icon: 'list'}, { title: 'Genes', icon: 'list' },
{ title: 'About', icon: 'contact_support' } { title: 'About', icon: 'contact_support' },
], ],
right: null, right: null,
} };
} },
}; };
</script> </script>
...@@ -7,7 +7,11 @@ import './registerServiceWorker'; ...@@ -7,7 +7,11 @@ import './registerServiceWorker';
import 'vuetify/dist/vuetify.min.css'; import 'vuetify/dist/vuetify.min.css';
Vue.config.productionTip = false; Vue.config.productionTip = false;
Vue.use(Vuetify); Vue.use(Vuetify, {
theme: {
primary: '#042630',
},
});
new Vue({ new Vue({
router, router,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment