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

make component for drawer

parent a57dd0f5
<template>
<v-app>
<Navbar />
<Navbar/>
<v-content>
<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>
<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-title class="headline">
<span class="font-weight-light">Metagene</span>
......@@ -17,53 +17,27 @@
</v-btn>
</v-toolbar>
<v-navigation-drawer v-model="drawer" app width=200 class="blue-grey darken-4">
<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>
<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>
<Drawer :items="items" v-model="drawer"/>
</nav>
</template>
<script>
import Drawer from '@/components/Drawer.vue';
export default {
components: { Drawer },
data() {
return {
drawer: false,
items: [
{ title: 'Home', icon: 'home' },
{ title: 'Catalog Statistics', icon: 'bar_chart'},
{ title: 'Genes', icon: 'list'},
{ title: 'About', icon: 'contact_support' }
{ title: 'Catalog Statistics', icon: 'bar_chart' },
{ title: 'Genes', icon: 'list' },
{ title: 'About', icon: 'contact_support' },
],
right: null,
}
}
};
},
};
</script>
......@@ -7,7 +7,11 @@ import './registerServiceWorker';
import 'vuetify/dist/vuetify.min.css';
Vue.config.productionTip = false;
Vue.use(Vuetify);
Vue.use(Vuetify, {
theme: {
primary: '#042630',
},
});
new Vue({
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