diff --git a/package-lock.json b/package-lock.json
index 1713a45e058338e480662dd5179faa909ef85992..34f8b4cd2b873c86bbf8475ec362678df11e4c71 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3705,7 +3705,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3726,12 +3727,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3746,17 +3749,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3873,7 +3879,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3885,6 +3892,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3899,6 +3907,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3906,12 +3915,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3930,6 +3941,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4010,7 +4022,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4022,6 +4035,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4107,7 +4121,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4143,6 +4158,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4162,6 +4178,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4205,12 +4222,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -11059,6 +11078,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz",
+      "integrity": "sha512-mdHeHT/7u4BncpUZMlxNaIdcN/HIt1GsGG5LKByArvYG/v6DvHcOxvDCts+7SRdCoIRGllK8IMZvQtQXLppDYg=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/package.json b/package.json
index f38793de07aaf6a7b681ca8d1c939fed395006d8..a121b3603e6a1552008f99e75d03b7943358991b 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
     "bootstrap": "^4.3.1",
     "bootstrap-vue": "^2.0.0-rc.15",
     "vue": "^2.6.10",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.1.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
diff --git a/src/App.vue b/src/App.vue
index 8b934f953b0c618e1887b43a849d4872b84a17e2..306d66d1091f8b5aef4f6f2965b2926b0c4edfe7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,21 @@
 <template>
   <div id="app">
+    <app-navbar/>
     <router-view/>
   </div>
 </template>
 
 <script>
+
+import navbar from '@/components/Navbar'
+
 export default {
   name: 'App',
+  components: {
+    'app-navbar': navbar,
+  },
 }
+
 </script>
 
 <style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 1c19f2a399d4735f5a3dd4ae1456f476f3de2fa4..629763357369cbd7fe04719f78abcd99eb7bb36e 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -90,6 +90,9 @@ export default {
     return {
       msg: 'Welcome to Your Vue.js App'
     }
+  },
+  created : function() {
+    this.$store.commit('changed','Jenis Keuangan')
   }
 }
 </script>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..689e5b12900b64b463a9834794ac70c73c4af468
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,97 @@
+<template>
+  <div id="navbar">
+    <b-navbar toggleable="lg" type="dark" variant="info">
+        <b-navbar-brand>
+          <router-link to="/">
+            APBD JABAR
+          </router-link>
+        </b-navbar-brand>
+
+        <b-navbar-toggle target="nav_collapse" />
+
+        <b-collapse is-nav id="nav_collapse">
+        <!-- Right aligned nav items -->
+        <b-navbar-nav>
+            <b-nav-item-dropdown v-bind:text=pilihan left>
+                <b-dropdown-item>
+                    <router-link to="/Pendapatan">
+                        Pendapatan
+                    </router-link>
+                </b-dropdown-item>
+                <b-dropdown-item>
+                    <router-link to="/BiayaLangsung">
+                        BiayaLangsung
+                    </router-link>
+                </b-dropdown-item>
+                <b-dropdown-item>
+                    <router-link to="/BiayaTidakLangsung">
+                        Biaya Tidak Langsung
+                    </router-link>
+                </b-dropdown-item>
+                <b-dropdown-item>
+                    <router-link to="/Pembiayaan">
+                        Pembiayaan
+                    </router-link>
+                </b-dropdown-item>
+            </b-nav-item-dropdown>
+        </b-navbar-nav>
+
+        <b-navbar-nav class="ml-auto">
+            <b-nav-item>
+              <router-link to="/Login" style="color:white;">
+                Login
+              </router-link>
+            </b-nav-item>
+        </b-navbar-nav>
+
+
+        </b-collapse>
+    </b-navbar>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Navbar',
+  data () {
+    return {
+      pilihan : this.$store.state.pilihan,
+    }
+  },
+  computed : {
+    state_watcher () {
+      return this.$store.state.pilihan
+    }
+  },
+  methods : {
+
+  },
+  created : function() {
+    this.pilihan = this.$store.state.pilihan
+  },
+  watch : {
+    state_watcher(newPilihan, oldPilihan) {
+      //   console.log("lama : " + oldPilihan + ", baru :" +newPilihan)
+        this.pilihan = newPilihan
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+b-nav-item {
+  color: white;
+}
+li a {
+  text-decoration: none;
+  color : black;
+}
+
+a {
+  text-decoration: none;
+  color : white;
+}
+
+</style>
diff --git a/src/components/pages/BiayaLangsungPage.vue b/src/components/pages/BiayaLangsungPage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a5f47f6a1aa7de5d296824496b8f9cc8a36fcde7
--- /dev/null
+++ b/src/components/pages/BiayaLangsungPage.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    Biaya Langsung
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BiayaLangsung',
+  components: {
+
+  },
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+      
+  },
+  created : function() {
+    this.$store.commit('changed','Biaya Langsung')
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import 'src/assets/css/style.scss';
+
+</style>
\ No newline at end of file
diff --git a/src/components/pages/BiayaTidakLangsungPage.vue b/src/components/pages/BiayaTidakLangsungPage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dafc41113d2d81f9e5dc620688c67fd2b569b0d8
--- /dev/null
+++ b/src/components/pages/BiayaTidakLangsungPage.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    Biaya Tidak langsung
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BiayaTidakLangsung',
+  components: {
+
+  },
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+      
+  },
+  created : function() {
+    this.$store.commit('changed','Biaya Tidak Langsung')
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import 'src/assets/css/style.scss';
+
+</style>
\ No newline at end of file
diff --git a/src/components/pages/LandingPage.vue b/src/components/pages/LandingPage.vue
index 1cc01d5da8a9baa0f0db32c4f05fee50d26d333c..24d9f8699d2d70d312edb04ce5a3081f6660b7be 100644
--- a/src/components/pages/LandingPage.vue
+++ b/src/components/pages/LandingPage.vue
@@ -29,6 +29,9 @@ export default {
     },
     methods: {
         
+    },
+    created : function() {
+      this.$store.commit('changed','Pendapatan')
     }
 }
 </script>
diff --git a/src/components/pages/LoginPage.vue b/src/components/pages/LoginPage.vue
index 9336fe2731e639516e2113cf9579d0dd36203e10..a540794a7b5110888059ce6d196e6eb691a03880 100644
--- a/src/components/pages/LoginPage.vue
+++ b/src/components/pages/LoginPage.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-container fluid>
+  <div>
     Ini buat login
-  </v-container>
+  </div>
 </template>
 
 <script>
@@ -11,10 +11,15 @@ export default {
 
     },
     data() {
+      return {
 
+      }
     },
     methods: {
         
+    },
+    created : function() {
+      this.$store.commit('changed','Jenis Keuangan')
     }
 }
 </script>
diff --git a/src/components/pages/PembiayaanPage.vue b/src/components/pages/PembiayaanPage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..30fccfa5b72cc859cbfaf0cd085a1cfd9d2c3430
--- /dev/null
+++ b/src/components/pages/PembiayaanPage.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    Pembiayaan
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Pembiayaan',
+  components: {
+
+  },
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+      
+  },
+  created : function() {
+    this.$store.commit('changed','Pembiayaan')
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import 'src/assets/css/style.scss';
+
+</style>
\ No newline at end of file
diff --git a/src/components/pages/PendapatanPage.vue b/src/components/pages/PendapatanPage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..04b07295b428e0087e67351b049cc509d08d1412
--- /dev/null
+++ b/src/components/pages/PendapatanPage.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    Pendapatan
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Pendapatan',
+  components: {
+
+  },
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+      
+  },
+  created : function() {
+    this.$store.commit('changed','Pendapatan')
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import 'src/assets/css/style.scss';
+
+</style>
\ No newline at end of file
diff --git a/src/components/store/Store.js b/src/components/store/Store.js
new file mode 100644
index 0000000000000000000000000000000000000000..276691d447397bf91e4d3e2cfc6cff5990308c1c
--- /dev/null
+++ b/src/components/store/Store.js
@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+Vue.prototype.$store = store
+export const store = new Vuex.Store({
+  state : {
+      pilihan:'Jenis Keuangan',
+      count : 0
+  },
+  computed: {
+      pilihan () {
+          return this.$store.getters.pilihan
+      }
+  },
+  mutations : {
+      changed(state, pil) {
+          this.state.pilihan=pil
+      }
+  },
+  getters : {
+      pilihan : (state) => {
+          return this.state.pilihan
+      }
+  }
+    
+})
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 9868e451f28bade2f3af204b3dd697a4f932310d..9d4ab8846d9f4d49fae15007603ed7f9b7ec9d6f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,19 +1,25 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
+import Vuex from 'vuex'
 import App from './App'
 import router from './router'
 import BootstrapVue from 'bootstrap-vue'
+import {store} from './components/store/store'
+ 
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 Vue.config.productionTip = false
 Vue.use(BootstrapVue)
-
+Vue.use(Vuex)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>'
 })
+
+
diff --git a/src/router/index.js b/src/router/index.js
index 75398dd39a5fbbc2c123869a906e710ea231a266..ec5cd07a0e33a7a18373a2f95589702ec80443ed 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,11 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import LandingPage from '@/components/pages/LandingPage'
 import LoginPage from '@/components/pages/LoginPage'
+import HelloWorld from '@/components/HelloWorld'
+import Pendapatan from '@/components/pages/PendapatanPage'
+import Pembiayaan from '@/components/pages/PembiayaanPage'
+import BiayaTidakLangsung from '@/components/pages/BiayaTidakLangsungPage'
+import BiayaLangsung from '@/components/pages/BiayaLangsungPage'
 
 Vue.use(Router)
 
@@ -9,6 +14,11 @@ export default new Router({
   routes: [
     {
       path: '/',
+      name: 'HelloWorld',
+      component: HelloWorld
+    },
+    {
+      path: '/LandingPage',
       name: 'LandingPage',
       component: LandingPage
     },
@@ -17,6 +27,26 @@ export default new Router({
       name: 'LoginPage',
       component: LoginPage
     },
+    {
+      path: '/Pendapatan',
+      name: 'PendapatanPage',
+      component: Pendapatan
+    },
+    {
+      path: '/BiayaTidakLangsung',
+      name: 'BiayaTidakLangsung',
+      component: BiayaTidakLangsung
+    },
+    {
+      path: '/BiayaLangsung',
+      name: 'BiayaLangsung',
+      component: BiayaLangsung
+    },
+    {
+      path: '/Pembiayaan',
+      name: 'Pembiayaan',
+      component: Pembiayaan
+    },
   ],
   mode: 'history',
 })