create howto page (wip)

dmstern · Sep 10, 2018 · c9ae049 · c9ae049
1 parent 66a1ed5
commit c9ae049
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 11 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -15,18 +15,22 @@
           </v-toolbar-title>
         </v-list-tile>
 
-        <v-list-tile
-          value="true"
+        <router-link
           v-for="(item, i) in navItems"
           :key="i"
+          :to="item.target"
         >
-          <v-list-tile-action>
-            <v-icon v-html="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>
+          <v-list-tile
+            value="true"
+          >
+            <v-list-tile-action>
+              <v-icon v-html="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>
         <About />
       </v-list>
     </v-navigation-drawer>
@@ -191,7 +195,13 @@ export default class App extends Vue {
   private clipped: boolean = true;
   private hasFocus: boolean = false;
   private btnIconSize: number = 36;
-  private navItems: any[] = [];
+  private navItems: Array<{ icon: string, title: string, target: string }> = [
+    {
+      icon: 'email',
+      title: 'howto',
+      target: 'howto',
+    },
+  ];
   private error: {
     show: boolean,
     msg: string,
@@ -370,7 +380,7 @@ h6 {
 }
 
 a {
-  display: inline-block;
+  // display: inline-block;
   text-decoration: none;
   transition: $transition-fast;
 

diff --git a/src/router.ts b/src/router.ts
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import Home from './views/Home.vue';
 import PackageDetail from './views/PackageDetail.vue';
+import HowTo from './views/HowTo.vue';
 
 Vue.use(Router);
 
@@ -17,5 +18,10 @@ export default new Router({
       name: 'packageDetail',
       component: PackageDetail,
     },
+    {
+      path: '/howto/',
+      name: 'howto',
+      component: HowTo,
+    },
   ],
 });
diff --git a/src/views/HowTo.vue b/src/views/HowTo.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="howto">
+      <v-container>
+
+    <h1>HowTo publish packages</h1>
+    <p>
+      Bla
+    </p>
+      </v-container>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component
+export default class HowTo extends Vue {}
+</script>