From bbffd79912ac159ac97a92b099368b7e5591ec88 Mon Sep 17 00:00:00 2001
From: Matthias Hager <matthias@2helixtech.com>
Date: Thu, 2 Mar 2017 15:26:31 -0500
Subject: [PATCH] add a static navigation component

---
 src/app/App.vue                              |  8 ++++-
 src/app/accounts/components/AccountsList.vue |  3 --
 src/app/budgets/components/BudgetsList.vue   |  2 --
 src/app/navigation/components/Navigation.vue | 31 ++++++++++++++++++++
 src/app/navigation/components/index.js       |  1 +
 src/app/navigation/index.js                  |  1 +
 src/app/navigation/vuex/actions.js           |  3 ++
 src/app/navigation/vuex/index.js             | 12 ++++++++
 src/app/navigation/vuex/mutations.js         |  5 ++++
 9 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 src/app/navigation/components/Navigation.vue
 create mode 100644 src/app/navigation/components/index.js
 create mode 100644 src/app/navigation/index.js
 create mode 100644 src/app/navigation/vuex/actions.js
 create mode 100644 src/app/navigation/vuex/index.js
 create mode 100644 src/app/navigation/vuex/mutations.js

diff --git a/src/app/App.vue b/src/app/App.vue
index 2939973..bc2bd0d 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -3,6 +3,7 @@
     <div class="columns app-container">
       <div class="column is-3 sidebar">
         <span class="brand"><img src="../assets/logo.png">udgeterbium</span>
+        <navigation></navigation>
       </div>
       <div class="column">
         <router-view></router-view>
@@ -12,8 +13,13 @@
 </template>
 
 <script>
+import { Navigation } from './navigation/components';
+
 export default {
-  name: 'app'
+  name: 'app',
+  components: {
+    Navigation
+  }
 };
 </script>
 
diff --git a/src/app/accounts/components/AccountsList.vue b/src/app/accounts/components/AccountsList.vue
index d42837c..c8dc61a 100644
--- a/src/app/accounts/components/AccountsList.vue
+++ b/src/app/accounts/components/AccountsList.vue
@@ -12,9 +12,6 @@
       </div>
     </nav>
 
-
-    <router-link :to="{ name: 'budgetsList' }">View budgets</router-link>
-
     <table class="table is-bordered">
       <thead>
         <tr>
diff --git a/src/app/budgets/components/BudgetsList.vue b/src/app/budgets/components/BudgetsList.vue
index e01a983..07784e9 100644
--- a/src/app/budgets/components/BudgetsList.vue
+++ b/src/app/budgets/components/BudgetsList.vue
@@ -12,8 +12,6 @@
       </div>
     </nav>
 
-    <router-link :to="{ name: 'accountsList' }">View accounts</router-link>
-
     <table class="table is-bordered">
       <thead>
         <tr>
diff --git a/src/app/navigation/components/Navigation.vue b/src/app/navigation/components/Navigation.vue
new file mode 100644
index 0000000..318ccaf
--- /dev/null
+++ b/src/app/navigation/components/Navigation.vue
@@ -0,0 +1,31 @@
+<template>
+  <div id="navigation-view">
+    <ul>
+      <li><router-link :to="{ name: 'accountsList' }">Accounts</router-link></li>
+      <li><router-link :to="{ name: 'budgetsList' }">Budgets</router-link></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'navigation'
+};
+</script>
+
+<style scoped lang='scss'>
+  ul {
+    margin-top: 50px;
+
+    li {
+      border-bottom: 2px solid rgb(31, 78, 93);
+      font-size: 1.8em;
+      padding-left: 20px;
+      margin: 18px 20px;
+
+      a {
+        color: #ffffff;
+      }
+    }
+  }
+</style>
diff --git a/src/app/navigation/components/index.js b/src/app/navigation/components/index.js
new file mode 100644
index 0000000..76443bd
--- /dev/null
+++ b/src/app/navigation/components/index.js
@@ -0,0 +1 @@
+export { default as Navigation } from './Navigation';
diff --git a/src/app/navigation/index.js b/src/app/navigation/index.js
new file mode 100644
index 0000000..7634c9d
--- /dev/null
+++ b/src/app/navigation/index.js
@@ -0,0 +1 @@
+export { default as vuex } from './vuex';
diff --git a/src/app/navigation/vuex/actions.js b/src/app/navigation/vuex/actions.js
new file mode 100644
index 0000000..11b2618
--- /dev/null
+++ b/src/app/navigation/vuex/actions.js
@@ -0,0 +1,3 @@
+export const doSomething = ({ commit }, data) => {
+  commit('DO_SOMETHING', { data: data });
+};
diff --git a/src/app/navigation/vuex/index.js b/src/app/navigation/vuex/index.js
new file mode 100644
index 0000000..febf2d6
--- /dev/null
+++ b/src/app/navigation/vuex/index.js
@@ -0,0 +1,12 @@
+import * as actions from './actions';
+import mutations from './mutations';
+
+const state = {
+  transactions: []
+};
+
+export default {
+  state,
+  actions,
+  mutations
+};
diff --git a/src/app/navigation/vuex/mutations.js b/src/app/navigation/vuex/mutations.js
new file mode 100644
index 0000000..b29e66b
--- /dev/null
+++ b/src/app/navigation/vuex/mutations.js
@@ -0,0 +1,5 @@
+export default {
+  DO_SOMETHING (state, { data }) {
+    state.something = data;
+  }
+};