From 72cc7ae89df7b9669cd1e45cfd0184d801424c5f Mon Sep 17 00:00:00 2001
From: Joe Fleming <joe.fleming@gmail.com>
Date: Tue, 31 Jan 2017 19:29:54 -0700
Subject: [PATCH] add router and route containers

---
 src/App.vue                  | 66 ++++++++++++++++++++++--------------
 src/containers/About.vue     | 15 ++++++++
 src/containers/Customers.vue | 15 ++++++++
 src/containers/Orders.vue    | 15 ++++++++
 src/main.js                  |  5 +--
 src/router.js                | 41 ++++++++++++++++++++++
 6 files changed, 129 insertions(+), 28 deletions(-)
 create mode 100644 src/containers/About.vue
 create mode 100644 src/containers/Customers.vue
 create mode 100644 src/containers/Orders.vue
 create mode 100644 src/router.js

diff --git a/src/App.vue b/src/App.vue
index a4c2e0e..e500b08 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,33 +1,45 @@
 <template>
-  <nav class="nav">
-    <div class="nav-left">
-      <div class="nav-item">
-        Customer Management
+  <!-- top navigation -->
+  <div id="app" class="container">
+    <nav class="nav has-shadow">
+      <div class="nav-left">
+        <div class="nav-item is-brand">
+          <router-link class="nav-item is-brand" to="/">Customer Management</router-link>
+        </div>
       </div>
-    </div>
 
-    <!-- This "nav-toggle" hamburger menu is only visible on mobile -->
-    <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
-    <span class="nav-toggle">
-      <span></span>
-      <span></span>
-      <span></span>
-    </span>
-
-    <!-- This "nav-menu" is hidden on mobile -->
-    <!-- Add the modifier "is-active" to display it on mobile -->
-    <div class="nav-right nav-menu">
-      <a class="nav-item">Customers</a>
-      <a class="nav-item">Orders</a>
-      <a class="nav-item">About</a>
-      <span class="nav-item">
-        <a class="button" >
-          <span class="icon"><i class="fa fa-github"></i></span>
-          <span>Github</span>
-        </a>
+      <!-- This "nav-toggle" hamburger menu is only visible on mobile -->
+      <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
+      <span class="nav-toggle">
+        <span></span>
+        <span></span>
+        <span></span>
       </span>
-    </div>
-  </nav>
+
+      <!-- This "nav-menu" is hidden on mobile -->
+      <!-- Add the modifier "is-active" to display it on mobile -->
+      <div class="nav-right nav-menu">
+        <router-link class="nav-item is-tab" :to="{ name: 'customers' }" active-class="is-active">
+          Customers
+        </router-link>
+        <router-link class="nav-item is-tab" :to="{ name: 'orders' }" active-class="is-active">
+          Orders
+        </router-link>
+        <router-link class="nav-item is-tab" :to="{ name: 'about' }" active-class="is-active">
+          About
+        </router-link>
+        <span class="nav-item">
+          <a class="button" >
+            <span class="icon"><i class="fa fa-github"></i></span>
+            <span>Github</span>
+          </a>
+        </span>
+      </div>
+    </nav>
+
+    <!-- main app container -->
+    <router-view></router-view>
+  </div>
 </template>
 
 <script>
@@ -55,8 +67,10 @@
   // @import '~bulma'
   @import '~bulma/sass/utilities/_all'
   @import '~bulma/sass/base/_all'
+  @import '~bulma/sass/layout/section'
   @import '~bulma/sass/components/nav'
   @import '~bulma/sass/elements/button'
+  @import '~bulma/sass/elements/other'
 
   @import '~font-awesome/css/font-awesome.css';
 </style>
diff --git a/src/containers/About.vue b/src/containers/About.vue
new file mode 100644
index 0000000..caec189
--- /dev/null
+++ b/src/containers/About.vue
@@ -0,0 +1,15 @@
+<template>
+  <section class="section">
+    <div class="container">
+      <div class="notification">
+        About page...
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+  export default {
+
+  }
+</script>
\ No newline at end of file
diff --git a/src/containers/Customers.vue b/src/containers/Customers.vue
new file mode 100644
index 0000000..370af57
--- /dev/null
+++ b/src/containers/Customers.vue
@@ -0,0 +1,15 @@
+<template>
+  <section class="section">
+    <div class="container">
+      <div class="notification">
+        Customer list will go here
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+  export default {
+
+  }
+</script>
\ No newline at end of file
diff --git a/src/containers/Orders.vue b/src/containers/Orders.vue
new file mode 100644
index 0000000..a3f9f78
--- /dev/null
+++ b/src/containers/Orders.vue
@@ -0,0 +1,15 @@
+<template>
+  <section class="section">
+    <div class="container">
+      <div class="notification">
+        Orders will go here
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+  export default {
+
+  }
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 2c5e291..ff3d4f1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
-import App from './App.vue';
+import router from './router';
 
 new Vue({
-  render: h => h(App),
+  router,
+  render: h => h('router-view'),
 }).$mount('#app');
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 0000000..de86e61
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,41 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+import App from './App.vue';
+
+import Customers from './containers/Customers.vue';
+import Orders from './containers/Orders.vue';
+import About from './containers/About.vue';
+
+Vue.use(VueRouter);
+
+const routes = [{
+  path: '/',
+  name: 'app',
+  component: App,
+  children: [
+    {
+      path: 'customers',
+      name: 'customers',
+      component: Customers,
+    }, {
+      path: 'orders',
+      name: 'orders',
+      component: Orders,
+    }, {
+      path: 'about',
+      name: 'about',
+      component: About,
+    }, {
+      path: '*',
+      redirect: 'customers',
+    },
+  ],
+}];
+
+const router = new VueRouter({
+  mode: 'hash',
+  routes,
+});
+
+export default router;