Add navigation toolbar and drawer

frontend/public/index.html

@@ -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>

frontend/src/App.vue

 <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 {
       //

frontend/src/components/Navbar.vue

+<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>

frontend/src/components/chart-data.js

-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