add a static navigation component

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>
 

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>

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>

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>

src/app/navigation/components/index.js

@@ -0,0 +1 @@
+export { default as Navigation } from './Navigation';

src/app/navigation/index.js

@@ -0,0 +1 @@
+export { default as vuex } from './vuex';

src/app/navigation/vuex/actions.js

@@ -0,0 +1,3 @@
+export const doSomething = ({ commit }, data) => {
+  commit('DO_SOMETHING', { data: data });
+};

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
+};

src/app/navigation/vuex/mutations.js

@@ -0,0 +1,5 @@
+export default {
+  DO_SOMETHING (state, { data }) {
+    state.something = data;
+  }
+};