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

Add navigation toolbar and drawer

parent 4947602d
......@@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>code</title>
</head>
......
<template>
<v-app>
<v-toolbar app dark height="50" class="blue-grey darken-4">
<v-toolbar-title class="headline">MetageneDB</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat>About</v-btn>
</v-toolbar>
<v-navbar toggleable="lg" type="dark" variant="dark">
<v-navbar-brand to="/">MetageneDB</v-navbar-brand>
<v-navbar-toggle target="nav-collapse"></v-navbar-toggle>
<v-collapse id="nav-collapse" is-nav>
<v-navbar-nav>
<v-nav-item to="/">Home</v-nav-item>
<v-nav-item to="/about">About</v-nav-item>
</v-navbar-nav>
</v-collapse>
</v-navbar>
<Navbar />
<v-content>
<router-view></router-view>
......@@ -26,9 +9,11 @@
</template>
<script>
import Navbar from '@/components/Navbar.vue';
export default {
name: 'App',
components: { Navbar },
data() {
return {
//
......
<template>
<nav>
<v-toolbar flat app dark height="50" class="blue-grey darken-4">
<v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title class="headline">
<span class="font-weight-light">Metagene</span>
<span>DB</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat>
<span>Sign in</span>
<v-icon right>exit_to_app</v-icon>
</v-btn>
<v-btn flat>
<span>Help</span>
<v-icon right>help</v-icon>
</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>
</nav>
</template>
<script>
export default {
data() {
return {
drawer: false,
items: [
{ title: 'Home', icon: 'home' },
{ title: 'Catalog Statistics', icon: 'bar_chart'},
{ title: 'Genes', icon: 'list'},
{ title: 'About', icon: 'contact_support' }
],
right: null,
}
}
};
</script>
export const planetChartData = {
type: 'bar',
data: {
labels: [
'0-10000',
'10000-20000',
'20000-30000',
'30000-40000',
'40000-50000',
'50000-60000',
'60000-70000',
'70000-80000',
'80000-90000'
],
datasets: [
{ // one line graph
label: 'Number of Genes',
data: [0, 887, 97, 10, 3, 0, 1, 0, 2],
backgroundColor: [
'rgba(54,73,93,.5)', // Blue
],
borderColor: [
'#36495d',
],
borderWidth: 3
},
]
},
options: {
responsive: true,
lineTension: 1,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
padding: 25,
}
}]
}
}
}
export default planetChartData;
\ No newline at end of file
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