make component for drawer

frontend/src/App.vue

 <template>
   <v-app>
-    <Navbar />
+    <Navbar/>
 
     <v-content>
       <router-view></router-view>

frontend/src/components/Drawer.vue

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

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>
+  <nav>
+    <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>
+        <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>
+  <Drawer :items="items" v-model="drawer"/>
 
-      <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>
+  </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: 'Home', icon: 'home' },
+        { title: 'Catalog Statistics', icon: 'bar_chart' },
+        { title: 'Genes', icon: 'list' },
+        { title: 'About', icon: 'contact_support' },
+      ],
       right: null,
-    }
-  }
-
+    };
+  },
 };
 </script>

frontend/src/main.js

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