Navigation: Add home, color items

dmstern · Nov 26, 2018 · 61392ef · 61392ef
1 parent f2ce1a7
commit 61392ef
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 27 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -15,22 +15,19 @@
           </v-toolbar-title>
         </v-list-tile>
 
-        <router-link
+        <v-list-tile
+          value="true"
           v-for="(item, i) in navItems"
           :key="i"
-          :to="`/${item.target}`"
+          @click="$router.push(`/${item.target}`)"
         >
-          <v-list-tile
-            value="true"
-          >
-            <v-list-tile-action>
-              <v-icon>{{$vuetify.icons[item.icon]}}</v-icon>
-            </v-list-tile-action>
-            <v-list-tile-content>
-              <v-list-tile-title v-text="item.title"></v-list-tile-title>
-            </v-list-tile-content>
-          </v-list-tile>
-        </router-link>
+          <v-list-tile-action>
+            <v-icon>{{$vuetify.icons[item.icon]}}</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <v-list-tile-title v-text="item.title"></v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
         <About />
       </v-list>
     </v-navigation-drawer>
@@ -201,6 +198,11 @@ export default class App extends Vue {
   private hasFocus: boolean = false;
   private btnIconSize: number = 36;
   private navItems: Array<{ icon: string, title: string, target: string }> = [
+    {
+      icon: 'home',
+      title: 'Home',
+      target: '',
+    },
     {
       icon: 'howto',
       title: 'HowTo',
@@ -256,7 +258,7 @@ export default class App extends Vue {
 
   }
 
-  private clearSearchBar() : void {
+  private clearSearchBar(): void {
     while (this.$refs.searchbar.selectedItems.length > 0) {
       this.$refs.searchbar.selectedItems.pop();
     }
@@ -400,24 +402,23 @@ a {
     opacity: 0.7;
   }
 
-  .v-icon {
-    vertical-align: baseline;
-
-    &,
-    .theme--light & {
-      &,
-      .application & {
-        color: inherit;
-      }
-    }
-  }
-
   .v-chip .v-chip__content {
     cursor: pointer;
   }
 }
 
 .v-icon {
+
+  vertical-align: baseline;
+
+  &,
+  .theme--light & {
+    &,
+    .application & {
+      color: inherit;
+    }
+  }
+
   &.fas,
   &.far {
     transform: scale($mdi2faScaleFactor);

diff --git a/src/components/About.vue b/src/components/About.vue
@@ -5,7 +5,7 @@
       scrollable
     >
 
-      <v-list-tile slot="activator">
+      <v-list-tile slot="activator" color="primary">
         <v-list-tile-action>
           <v-icon>{{$vuetify.icons.about}}</v-icon>
         </v-list-tile-action>

diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -35,6 +35,7 @@ const icons = {
   externalLink: 'fas fa-external-link-alt',
   terminal: 'fas fa-terminal',
   email: 'far fa-envelope',
+  home: 'fas fa-home',
 };
 
 icons.keywords = icons.tags;