Basic page layouts

src/App.vue

@@ -1,34 +1,18 @@
 <template>
   <v-app>
 
-    <v-navigation-drawer v-model="drawer" clipped app>
-
-      <v-list dense>
-        <v-list-tile>
-          <v-list-tile-content>
-            <v-list-tile-title>Link 1</v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
-        <v-list-tile>
-          <v-list-tile-content>
-            <v-list-tile-title>Link 2</v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
-      </v-list>
-
-    </v-navigation-drawer>
-
     <v-toolbar clipped-left app>
 
-      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
       <v-toolbar-title class="mr-5 align-center">
-        <span class="title">LBRY.tech</span>
+        <span class="title"><router-link to="/">LBRY.tech</router-link></span>
       </v-toolbar-title>
       <v-spacer></v-spacer>
       <v-toolbar-items class="hidden-sm-and-down">
-        <v-btn flat>Link One</v-btn>
-        <v-btn flat>Link Two</v-btn>
-        <v-btn flat>Link Three</v-btn>
+        <v-btn flat to="/overview">Overview</v-btn>
+        <v-btn flat to="/documentation">Documentation</v-btn>
+        <v-btn flat to="/contribute">How to Contribute</v-btn>
+        <v-btn flat to="/develop">How to Develop</v-btn>
+        <v-btn flat to="/resources">Resources</v-btn>
       </v-toolbar-items>
 
     </v-toolbar>
@@ -46,9 +30,7 @@
 
 export default {
   data () {
-    return {
-      drawer: true
-    }
+    return {}
   },
   name: 'App'
 }

src/components/pages/Contribute.vue

@@ -0,0 +1,24 @@
+<template>
+
+  <div>
+
+    <p>Contribute.</p>
+
+  </div>
+
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+    }
+  },
+  name: 'Contribute'
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/components/pages/Develop.vue

@@ -0,0 +1,24 @@
+<template>
+
+  <div>
+
+    <p>Develop.</p>
+
+  </div>
+
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+    }
+  },
+  name: 'Develop'
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/components/pages/Documentation.vue

@@ -0,0 +1,41 @@
+<template>
+
+  <div>
+
+    <v-navigation-drawer v-model="drawer" clipped app>
+
+      <v-list dense>
+        <v-list-tile>
+          <v-list-tile-content>
+            <v-list-tile-title>Link 1</v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+        <v-list-tile>
+          <v-list-tile-content>
+            <v-list-tile-title>Link 2</v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+      </v-list>
+
+    </v-navigation-drawer>
+
+    <p>Documentation will be here.</p>
+
+  </div>
+
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+    }
+  },
+  name: 'Documentation'
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/components/pages/Home.vue

@@ -1,7 +1,51 @@
 <template>
 
+  <div>
+
     <hook></hook>
 
+    <v-container fluid grid-list-md>
+
+      <v-layout row wrap>
+
+        <v-flex xs6>
+
+          <h1>HTML Ipsum Presents</h1>
+
+          <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+          <h2>Header Level 2</h2>
+
+          <ol>
+             <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+             <li>Aliquam tincidunt mauris eu risus.</li>
+          </ol>
+
+          <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+          <h3>Header Level 3</h3>
+
+          <ul>
+             <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+             <li>Aliquam tincidunt mauris eu risus.</li>
+          </ul>
+
+          <pre><code>
+          #header h1 a {
+            display: block;
+            width: 300px;
+            height: 80px;
+          }
+          </code></pre>
+
+        </v-flex>
+
+      </v-layout>
+
+    </v-container>
+
+  </div>
+
 </template>
 
 <script>

src/components/pages/Overview.vue

@@ -0,0 +1,24 @@
+<template>
+
+  <div>
+
+    <p>Overview.</p>
+
+  </div>
+
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+    }
+  },
+  name: 'Overview'
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/components/pages/Resources.vue

@@ -0,0 +1,24 @@
+<template>
+
+  <div>
+
+    <p>Resources.</p>
+
+  </div>
+
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+    }
+  },
+  name: 'Resources'
+}
+</script>
+
+<style lang="scss">
+
+</style>

src/router/index.js

@@ -1,6 +1,11 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from '@/components/pages/Home'
+import Overview from '@/components/pages/Overview'
+import Documentation from '@/components/pages/Documentation'
+import Contribute from '@/components/pages/Contribute'
+import Develop from '@/components/pages/Develop'
+import Resources from '@/components/pages/Resources'
 import Step1 from '@/components/partials/Step1'
 import Step2 from '@/components/partials/Step2'
 import Step3 from '@/components/partials/Step3'
@@ -31,6 +36,30 @@ export default new Router({
         }
       ]
     },
-
+    {
+      path: '/overview',
+      name: 'Overview',
+      component: Overview,
+    },
+    {
+      path: '/documentation',
+      name: 'Documentation',
+      component: Documentation,
+    },
+    {
+      path: '/contribute',
+      name: 'Contribute',
+      component: Contribute,
+    },
+    {
+      path: '/develop',
+      name: 'Develop',
+      component: Develop,
+    },
+    {
+      path: '/resources',
+      name: 'Resources',
+      component: Resources,
+    }
   ]
 })