proto

ui/package.json

@@ -14,13 +14,15 @@
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "vuetify": "^2.4.0"
+    "vuetify": "^2.5.10",
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-pwa": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",

ui/patches/vuetify+2.5.9.patch

@@ -11,6 +11,19 @@ index ee4419a..6d1ba3d 100644
  
  // Block
  .v-navigation-drawer
+diff --git a/node_modules/vuetify/src/styles/settings/_dark.scss b/node_modules/vuetify/src/styles/settings/_dark.scss
+index 753d70d..12980cc 100644
+--- a/node_modules/vuetify/src/styles/settings/_dark.scss
++++ b/node_modules/vuetify/src/styles/settings/_dark.scss
+@@ -6,7 +6,7 @@ $material-dark-elevation-colors: () !default;
+ $material-dark-elevation-colors: map-deep-merge(
+   (
+     '0': #000000,
+-    '1': #1E1E1E,
++    '1': #151515,
+     '2': #222222,
+     '3': #252525,
+     '4': #272727,
 diff --git a/node_modules/vuetify/src/styles/settings/_variables.scss b/node_modules/vuetify/src/styles/settings/_variables.scss
 index f5cc26b..6b998f1 100644
 --- a/node_modules/vuetify/src/styles/settings/_variables.scss

ui/src/App.vue

@@ -6,7 +6,43 @@
     </v-main>
   </v-app>
 </template>
+<style>
+.troploGradient {
+  font-weight: 500;background: -webkit-radial-gradient(#0179f3, #0190ea);-webkit-background-clip: text;-webkit-text-fill-color: transparent
+}
+.theme--dark.v-sheet {
+  background-color: #151515 !important;
+  border-color: #151515 !important;
+  color: #FFFFFF;
+}
+.card {
+  overflow: hidden
+}
+.theme--dark.v-card {
+  background-color: #151515 !important;
+}
+/* Works on Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: black #151515;
+}
 
+/* Works on Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 12px;
+}
+
+*::-webkit-scrollbar-track {
+  background: #0e0e0e;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #151515;
+  border-radius: 20px;
+  border: 3px solid #151515;
+}
+
+</style>
 <script>
 import Header from './components/Header.vue'
 export default {
@@ -17,5 +53,11 @@ export default {
   data: () => ({
     //
   }),
+  watch: {
+    $route (to) {
+      this.$store.commit('setRoute', to.name)
+      document.title = to.name + ' - ' + this.$store.state.site.name
+    }
+  }
 };
 </script>

ui/src/components/Header.vue

@@ -1,8 +1,13 @@
 <template>
   <div id="header">
+    <v-app-bar color="dark" floating app dense>
+      <v-app-bar-nav-icon v-if="$vuetify.breakpoint.mobile && $store.state.user.username" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+      <v-toolbar-title>{{$store.state.site.route}}<v-app-bar-nav-icon disabled v-if="$store.state.site.release !== 'prod'">{{$store.state.site.release}}</v-app-bar-nav-icon></v-toolbar-title>
+      <v-spacer></v-spacer>
+    </v-app-bar>
     <v-navigation-drawer
         floating
-        color="#1c1c1c"
+        color="dark"
         app
         expand>
       <v-divider></v-divider>
@@ -37,7 +42,7 @@ export default {
     return {
       items: [
         {id: 1, title: "Home", icon: "mdi-home", path: "/"},
-        {id: 1, title: "Watch_Dogs Tools", icon: "mdi-nexus", path: "/"}
+        {id: 2, title: "Projects", icon: "mdi-text-box-multiple", path: "/projects"}
       ]
     }
   },

ui/src/main.js

@@ -3,11 +3,13 @@ import App from './App.vue'
 import './registerServiceWorker'
 import router from './router'
 import vuetify from './plugins/vuetify'
+import store from './store'
 
 Vue.config.productionTip = false
 
 new Vue({
   router,
   vuetify,
+  store,
   render: h => h(App)
 }).$mount('#app')

ui/src/plugins/vuetify.js

@@ -12,11 +12,12 @@ export default new Vuetify({
                 secondary: colors.grey.darken1,
                 accent: colors.shades.black,
                 error: colors.red.accent3,
+                dark: "#151515",
                 text: "#000000"
             },
             dark: {
                 primary: colors.blue,
-                dark: "#1c1c1c",
+                dark: "#151515",
                 text: "#ffffff"
             },
         },

ui/src/router/index.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
@@ -8,20 +7,29 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
   },
   {
-    path: '/about',
-    name: 'About',
+    path: '/projects',
+    name: 'Projects',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+    component: () => import(/* webpackChunkName: "projects" */ '../views/Projects.vue')
+  },
+  {
+    path: '/nexus',
+    name: 'Nexus',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "nexus" */ '../views/Nexus.vue')
+  },
 ]
 
 const router = new VueRouter({
-  routes
+  routes,
+  mode: "history"
 })
 
 export default router

ui/src/store/index.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    site: {
+      route: ''
+    }
+  },
+  mutations: {
+    setSite(state, data) {
+      state.site = data
+    },
+    setRoute(state, data) {
+      state.site.route = data
+    }
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

ui/src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

ui/src/views/Home.vue

@@ -1,15 +1,11 @@
 <template>
-  <hello-world />
+  <div id="home">
+
+  </div>
 </template>
 
 <script>
-  import HelloWorld from '../components/HelloWorld'
-
   export default {
     name: 'Home',
-
-    components: {
-      HelloWorld,
-    },
   }
 </script>

ui/src/views/Nexus.vue

@@ -0,0 +1,15 @@
+<template>
+  <div id="nexus">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Nexus"
+}
+</script>
+
+<style scoped>
+
+</style>

ui/src/views/Projects.vue

@@ -0,0 +1,17 @@
+<template>
+  <div id="projects">
+    <v-container class="justify-center text-center">
+      <p class="text-h4">Projects</p>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Projects"
+}
+</script>
+
+<style scoped>
+
+</style>