major update (see details)

+ Settings page updates
+ Fix error page
+ Make colors more uniform
+ Add empty layout
+ Add dropdown menu

NUXT/layouts/default.vue

@@ -4,8 +4,22 @@
     <v-card class="topNav rounded-0" style="display: flex;" color="accent">
       <h2 v-text="page" />
       <v-spacer />
-      <v-btn text><v-icon>mdi-magnify</v-icon></v-btn>
+      <v-btn text class="toolbarAction"><v-icon>mdi-magnify</v-icon></v-btn>
-      <v-btn text><v-icon>mdi-dots-vertical</v-icon></v-btn>
+      
+
+      
+      <v-menu offset-y>
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn text class="toolbarAction" v-bind="attrs" v-on="on"><v-icon>mdi-dots-vertical</v-icon></v-btn>
+      </template>
+      <v-list>
+        <v-list-item v-for="(item, index) in dropdownMenu" :key="index">
+          <nuxt-link :to="item.link" style="text-decoration: none;" class="info--text">{{ item.title }}</nuxt-link>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+
+
     </v-card>
 
 
@@ -33,6 +47,10 @@
 </style>
 
 <style scoped>
+.toolbarAction {
+  min-width: 50px !important;
+}
+
 .topNav {
   padding: 1em;
 }
@@ -56,8 +74,6 @@
 <script>
   export default {
     data: () => ({
-      page: null,
-
       tabSelection: 0,
       tabs: [
         { name: "Home", icon: "mdi-home", link: "/" },
@@ -65,11 +81,21 @@
         //{ name: "Upload", icon: "mdi-plus", link: "/upload" },
         { name: "Subscriptions", icon: "mdi-youtube-subscription", link: "/subs" },
         { name: "Library", icon: "mdi-view-list", link: "/library" },
+      ],
+      dropdownMenu: [
+        { title: "Settings", link: "/settings" },
+        { title: "About", link: "/about" }
       ]
     }),
     mounted() {
-      const pageName = this.$route.path.split("/")[1];
+      
-      this.page = pageName.charAt(0).toUpperCase() + pageName.slice(1);
+    },
+    computed: {
+      page: function () {
+        let pageName = this.$route.path.split("/")[1];
+        pageName = pageName.charAt(0).toUpperCase() + pageName.slice(1);
+        return pageName || "Home";
+      }
     }
   }
 </script>

NUXT/layouts/empty.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-app>
+      <nuxt />
+  </v-app>
+</template>
+
+<style>
+* {
+  font-family: Arial, Helvetica, sans-serif !important;
+}
+</style>

NUXT/layouts/error.vue

@@ -1,45 +1,30 @@
 <template>
-  <v-app dark>
+  <v-app>
-    <h1 v-if="error.statusCode === 404">
+    <center>
-      {{ pageNotFound }}
+    
-    </h1>
+      <v-icon size="100">mdi-alert-circle</v-icon>
-    <h1 v-else>
+      <h1 class="grey--text">An error occured!</h1>
-      {{ otherError }}
+      <v-btn to="/">Reload Application</v-btn>
-    </h1>
+
-    <NuxtLink to="/">
+
-      Home page
+      <div style="margin-top: 5em; color: #999; font-size: 0.75em;">
-    </NuxtLink>
+        <div style="font-size: 1.4em;">Error Information</div>
+        <div>Code: {{ error.statusCode }}</div>
+        <div>Path: {{ this.$route.fullPath }}</div>
+      </div>
+    
+    </center>
   </v-app>
 </template>
 
 <script>
 export default {
-  name: 'EmptyLayout',
   layout: 'empty',
   props: {
     error: {
       type: Object,
       default: null
     }
-  },
-  data () {
-    return {
-      pageNotFound: '404 Not Found',
-      otherError: 'An error occurred'
-    }
-  },
-  head () {
-    const title =
-      this.error.statusCode === 404 ? this.pageNotFound : this.otherError
-    return {
-      title
-    }
   }
 }
 </script>
-
-<style scoped>
-h1 {
-  font-size: 20px;
-}
-</style>

NUXT/nuxt.config.js

@@ -45,13 +45,14 @@ export default {
       themes: {
         light: {
           primary: colors.red.lighten1,
-          accent: "#E62117"
+          accent: "#E62117",
+          info: "#000"
         },
         dark: {
           primary: colors.red.darken2, //colors.blue.darken2
           accent: colors.grey.darken3,
           secondary: colors.amber.darken3,
-          info: colors.teal.lighten1,
+          info: "#fff",
           warning: colors.amber.base,
           error: colors.deepOrange.accent4,
           success: colors.green.accent3

NUXT/pages/settings.vue

@@ -2,12 +2,17 @@
   <div class="mainContainer">
 
 
-    <v-switch
+    <v-card>
-      v-model="$vuetify.theme.dark"
+      <v-card-title>Theme</v-card-title>
-      label="Dark Theme"
+      <section>
-      hint="Bravo Six, Going Dark."
+        <v-switch
-      inset persistent-hint
+          v-model="$vuetify.theme.dark"
-    />
+          label="Dark Theme"
+          hint="Bravo Six, Going Dark."
+          persistent-hint
+        />
+      </section>
+    </v-card>
 
 
   </div>
@@ -15,6 +20,9 @@
 
 <style scoped>
 .mainContainer {
-  padding-left: 1em;
+  padding: 1em;
+}
+section {
+  padding: 0 1em 1em 1em;
 }
 </style>