From 9aec501a48c29f7e2b943d6442e3d0c45e01ed5f Mon Sep 17 00:00:00 2001
From: Peng-YM <1048217874pengym@gmail.com>
Date: Wed, 19 Aug 2020 21:34:35 +0800
Subject: [PATCH] Web

---
 backend/.idea/backend.iml         |  12 +++
 backend/.idea/modules.xml         |   8 ++
 backend/.idea/vcs.xml             |   6 ++
 backend/.idea/workspace.xml       |  72 ++++++++++++++
 backend/sub-store.js              |  26 ++---
 package-lock.json                 |  39 +++++++-
 web/package-lock.json             |  41 +++++++-
 web/package.json                  |   3 +
 web/src/App.vue                   |  64 ++++---------
 web/src/components/BottomNav.vue  |  38 ++++++++
 web/src/components/HelloWorld.vue | 151 ------------------------------
 web/src/components/TopToolbar.vue |  61 ++++++++++++
 web/src/plugins/vuetify.js        |   1 +
 13 files changed, 307 insertions(+), 215 deletions(-)
 create mode 100644 backend/.idea/backend.iml
 create mode 100644 backend/.idea/modules.xml
 create mode 100644 backend/.idea/vcs.xml
 create mode 100644 backend/.idea/workspace.xml
 create mode 100644 web/src/components/BottomNav.vue
 delete mode 100644 web/src/components/HelloWorld.vue
 create mode 100644 web/src/components/TopToolbar.vue

diff --git a/backend/.idea/backend.iml b/backend/.idea/backend.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/backend/.idea/backend.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/backend/.idea/modules.xml b/backend/.idea/modules.xml
new file mode 100644
index 0000000..e066844
--- /dev/null
+++ b/backend/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/backend.iml" filepath="$PROJECT_DIR$/.idea/backend.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/backend/.idea/vcs.xml b/backend/.idea/vcs.xml
new file mode 100644
index 0000000..6c0b863
--- /dev/null
+++ b/backend/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/backend/.idea/workspace.xml b/backend/.idea/workspace.xml
new file mode 100644
index 0000000..d6fa6b7
--- /dev/null
+++ b/backend/.idea/workspace.xml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="BranchesTreeState">
+    <expand>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="LOCAL_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="REMOTE_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="REMOTE_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="GROUP_NODE:origin" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+    </expand>
+    <select />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="8b97a098-48b2-4e64-a9ef-522fe2d30b52" name="Default Changelist" comment="">
+      <change beforePath="$PROJECT_DIR$/sub-store.js" beforeDir="false" afterPath="$PROJECT_DIR$/sub-store.js" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
+  </component>
+  <component name="ProjectId" id="1gJLR8mqORpDqtMcT5mk25VXwmL" />
+  <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="ASKED_ADD_EXTERNAL_FILES" value="true" />
+    <property name="ASKED_SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="8b97a098-48b2-4e64-a9ef-522fe2d30b52" name="Default Changelist" comment="" />
+      <created>1597827738046</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1597827738046</updated>
+      <workItem from="1597827739128" duration="775000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
+</project>
\ No newline at end of file
diff --git a/backend/sub-store.js b/backend/sub-store.js
index cbd9691..f30172a 100644
--- a/backend/sub-store.js
+++ b/backend/sub-store.js
@@ -10,7 +10,6 @@
  */
 
 const $ = API("sub-store");
-
 // Constants
 const SUBS_KEY = "subs";
 const COLLECTIONS_KEY = "collections";
@@ -22,9 +21,6 @@ if (!$.read(COLLECTIONS_KEY)) $.write({}, COLLECTIONS_KEY);
 // BACKEND API
 const $app = express();
 
-// subscriptions
-$app.get("/download/:name", downloadSub)
-
 $app.route("/sub/:name")
     .get(getSub)
     .patch(updateSub)
@@ -35,6 +31,9 @@ $app.route("/sub")
     .post(newSub)
     .delete(deleteAllSubs);
 
+// subscriptions
+$app.get("/download/:name", downloadSub);
+
 // collections
 $app.get("/download/collection/:name", downloadCollection);
 $app.route("/collection/:name")
@@ -53,7 +52,6 @@ $app.all("/", (req, res) => {
 $app.start();
 
 // SOME CONSTANTS
-const FALL_BACK_TARGET = "Raw";
 const DEFAULT_SUPPORTED_PLATFORMS = {
     QX: true,
     Loon: true,
@@ -405,7 +403,6 @@ function ProxyParser(targetPlatform) {
                         // skip unsupported proxies
                         // if proxy.supported is undefined, assume that all platforms are supported.
                         if (typeof proxy.supported === 'undefined' || proxy.supported[targetPlatform]) {
-                            delete proxy.supported;
                             result.push(proxy);
                             break;
                         }
@@ -418,9 +415,6 @@ function ProxyParser(targetPlatform) {
                 console.log(`ERROR: Failed to find a rule to parse line: \n${line}\n`);
             }
         }
-        if (result.length === 0) {
-            throw new Error(`ERROR: Input does not contains any valid node for platform ${targetPlatform}`)
-        }
         return result;
     }
 
@@ -429,7 +423,7 @@ function ProxyParser(targetPlatform) {
             if (p.targetPlatform === targetPlatform) {
                 return proxies.map(proxy => {
                     try {
-                        return p.output(proxy)
+                        return p.output(proxy);
                     } catch (err) {
                         console.log(`ERROR: cannot produce proxy: ${JSON.stringify(proxy)}\nReason: ${err}`);
                         return "";
@@ -1238,6 +1232,7 @@ function QX_Producer() {
 }
 
 function Loon_Producer() {
+    $.notify("LOON")
     const targetPlatform = "Loon";
     const output = (proxy) => {
         let obfs_opts, tls_opts;
@@ -1730,7 +1725,7 @@ function getPlatformFromHeaders(headers) {
     const keys = Object.keys(headers);
     let UA = "";
     for (let k of keys) {
-        if (k.match(/USER-AGENT/i)) {
+        if (/USER-AGENT/i.test(k)) {
             UA = headers[k];
             break;
         }
@@ -1743,7 +1738,7 @@ function getPlatformFromHeaders(headers) {
         return "Loon";
     } else {
         // browser
-        return FALL_BACK_TARGET;
+        return "Raw";
     }
 }
 
@@ -2078,6 +2073,10 @@ function express(port = 3000) {
     // dispatch url to route
     const dispatch = (request, start = 0) => {
         let {method, url, headers, body} = request;
+        if (/json/i.test(headers['Content-Type'])) {
+            body = JSON.parse(body);
+        }
+
         method = method.toUpperCase();
         const {path, query} = extractURL(url);
         let handler = null;
@@ -2093,6 +2092,7 @@ function express(port = 3000) {
             }
         }
         if (handler) {
+            $.notify(`DISPATCHING:`, `${method}, ${url}`, path);
             // dispatch to next handler
             const next = () => {
                 dispatch(method, url, i);
@@ -2106,7 +2106,7 @@ function express(port = 3000) {
             handler.callback(req, res, next).catch(err => {
                 res.status(500).json({
                     status: "failed",
-                    message: err
+                    message: "Internal Server Error"
                 });
             });
         } else {
diff --git a/package-lock.json b/package-lock.json
index 48e341a..aa6f58c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,3 +1,40 @@
 {
-  "lockfileVersion": 1
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      }
+    },
+    "debug": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "follow-redirects": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+      "requires": {
+        "debug": "=3.1.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    }
+  }
 }
diff --git a/web/package-lock.json b/web/package-lock.json
index 98dfa8e..cb8a818 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -2484,6 +2484,37 @@
       "integrity": "sha1-4eguTz6Zniz9YbFhKA0WoRH4ZCg=",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",
@@ -6972,9 +7003,8 @@
     },
     "lodash": {
       "version": "4.17.20",
-      "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.20.tgz?cache=0&sync_timestamp=1597335994883&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.20.tgz",
-      "integrity": "sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI=",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
@@ -7076,6 +7106,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-design-icons-iconfont": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-5.0.1.tgz",
+      "integrity": "sha512-Xg6rIdGrfySTqiTZ6d+nQbcFepS6R4uKbJP0oAqyeZXJY/bX6mZDnOmmUJusqLXfhIwirs0c++a6JpqVa8RFvA=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz",
diff --git a/web/package.json b/web/package.json
index ec82f55..987491f 100644
--- a/web/package.json
+++ b/web/package.json
@@ -8,7 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.6.5",
+    "lodash": "^4.17.20",
+    "material-design-icons-iconfont": "^5.0.1",
     "vue": "^2.6.11",
     "vuetify": "^2.2.11"
   },
diff --git a/web/src/App.vue b/web/src/App.vue
index e1e471a..1db3065 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,60 +1,30 @@
 <template>
   <v-app>
-    <v-app-bar
-      app
-      color="primary"
-      dark
-    >
-      <div class="d-flex align-center">
-        <v-img
-          alt="Vuetify Logo"
-          class="shrink mr-2"
-          contain
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
-          transition="scale-transition"
-          width="40"
-        />
-
-        <v-img
-          alt="Vuetify Name"
-          class="shrink mt-1 hidden-sm-and-down"
-          contain
-          min-width="100"
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
-          width="100"
-        />
-      </div>
-
-      <v-spacer></v-spacer>
-
-      <v-btn
-        href="https://github.com/vuetifyjs/vuetify/releases/latest"
-        target="_blank"
-        text
-      >
-        <span class="mr-2">Latest Release</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn>
-    </v-app-bar>
-
-    <v-main>
-      <HelloWorld/>
-    </v-main>
+    <TopToolbar></TopToolbar>
+    <BottomNav></BottomNav>
   </v-app>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld';
+import TopToolbar from "@/components/TopToolbar";
+import BottomNav from "@/components/BottomNav";
 
 export default {
-  name: 'App',
-
   components: {
-    HelloWorld,
+    TopToolbar,
+    BottomNav
+  },
+
+  props: {
+    source: String,
   },
 
   data: () => ({
-    //
+    drawer: null,
   }),
-};
-</script>
+
+  created() {
+    this.$vuetify.theme.dark = true
+  },
+}
+</script>
\ No newline at end of file
diff --git a/web/src/components/BottomNav.vue b/web/src/components/BottomNav.vue
new file mode 100644
index 0000000..090ca73
--- /dev/null
+++ b/web/src/components/BottomNav.vue
@@ -0,0 +1,38 @@
+<template>
+
+  <v-bottom-navigation
+      app
+      fixed
+      grow
+      v-model="activeItem"
+      color="primary"
+  >
+    <v-btn value="dashboard">
+      <span>首页</span>
+      <v-icon>dashboard</v-icon>
+    </v-btn>
+
+    <v-btn value="collection">
+      <span>订阅</span>
+      <v-icon>favorite</v-icon>
+    </v-btn>
+
+    <v-btn value="subscription">
+      <span>机场</span>
+      <v-icon>code</v-icon>
+    </v-btn>
+
+
+  </v-bottom-navigation>
+
+</template>
+
+<script>
+export default {
+  data: () => {
+    return {
+      activeItem: 'collection'
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/web/src/components/HelloWorld.vue b/web/src/components/HelloWorld.vue
deleted file mode 100644
index 8e95071..0000000
--- a/web/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <v-container>
-    <v-row class="text-center">
-      <v-col cols="12">
-        <v-img
-          :src="require('../assets/logo.svg')"
-          class="my-3"
-          contain
-          height="200"
-        />
-      </v-col>
-
-      <v-col class="mb-4">
-        <h1 class="display-2 font-weight-bold mb-3">
-          Welcome to Vuetify
-        </h1>
-
-        <p class="subheading font-weight-regular">
-          For help and collaboration with other Vuetify developers,
-          <br>please join our online
-          <a
-            href="https://community.vuetifyjs.com"
-            target="_blank"
-          >Discord Community</a>
-        </p>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          What's next?
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(next, i) in whatsNext"
-            :key="i"
-            :href="next.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ next.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          Important Links
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(link, i) in importantLinks"
-            :key="i"
-            :href="link.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ link.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          Ecosystem
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(eco, i) in ecosystem"
-            :key="i"
-            :href="eco.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ eco.text }}
-          </a>
-        </v-row>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script>
-  export default {
-    name: 'HelloWorld',
-
-    data: () => ({
-      ecosystem: [
-        {
-          text: 'vuetify-loader',
-          href: 'https://github.com/vuetifyjs/vuetify-loader',
-        },
-        {
-          text: 'github',
-          href: 'https://github.com/vuetifyjs/vuetify',
-        },
-        {
-          text: 'awesome-vuetify',
-          href: 'https://github.com/vuetifyjs/awesome-vuetify',
-        },
-      ],
-      importantLinks: [
-        {
-          text: 'Documentation',
-          href: 'https://vuetifyjs.com',
-        },
-        {
-          text: 'Chat',
-          href: 'https://community.vuetifyjs.com',
-        },
-        {
-          text: 'Made with Vuetify',
-          href: 'https://madewithvuejs.com/vuetify',
-        },
-        {
-          text: 'Twitter',
-          href: 'https://twitter.com/vuetifyjs',
-        },
-        {
-          text: 'Articles',
-          href: 'https://medium.com/vuetify',
-        },
-      ],
-      whatsNext: [
-        {
-          text: 'Explore components',
-          href: 'https://vuetifyjs.com/components/api-explorer',
-        },
-        {
-          text: 'Select a layout',
-          href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
-        },
-        {
-          text: 'Frequently Asked Questions',
-          href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
-        },
-      ],
-    }),
-  }
-</script>
diff --git a/web/src/components/TopToolbar.vue b/web/src/components/TopToolbar.vue
new file mode 100644
index 0000000..b7751ba
--- /dev/null
+++ b/web/src/components/TopToolbar.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+
+    <v-navigation-drawer
+        app
+        fixed
+        v-model="showMenu"
+    >
+      <v-list dense>
+        <v-list-item @click="doNothing">
+          <v-list-item-action>
+            <v-icon>settings</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title>Settings</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item @click="doNothing">
+          <v-list-item-action>
+            <v-icon>help</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title>Help</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-app-bar
+        app
+        fixed
+        dark
+        color="primary"
+    >
+      <v-app-bar-nav-icon @click.stop="toggleMenu"></v-app-bar-nav-icon>
+
+      <v-toolbar-title>SubStore</v-toolbar-title>
+
+    </v-app-bar>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => {
+    return {
+      showMenu: false
+    }
+  },
+
+  methods: {
+    toggleMenu: function() {
+      this.showMenu = !this.showMenu;
+    },
+    doNothing: function() {
+
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/web/src/plugins/vuetify.js b/web/src/plugins/vuetify.js
index ec46adb..22251c3 100644
--- a/web/src/plugins/vuetify.js
+++ b/web/src/plugins/vuetify.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
+import 'material-design-icons-iconfont/dist/material-design-icons.css'
 
 Vue.use(Vuetify);