diff --git a/src/App.vue b/src/App.vue
index eec3402f390043f27e8ed418bda7fd76b0145b29..462129fcbc70f1d87da04dc82576f8cd7b151fec 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,8 +18,7 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
   margin:0;
-  height: 100%;
-  margin-top: 100px;
+  padding-top: 130px;
 }
 
 html,
diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index a737ffa4d1dec782cd54d1dd6137366295a9075e..db93e776a59205349f6fd18d48dcc459eb369881 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed-top">
+  <div class=" navigation fixed-top">
     <!-- 
         <button  @click="setActive()" class="btn my-4 align-self-center" :class="{active_cont : isActive}" id="menu-btn">></button> -->
     <div id="sidebar" class="collapse collapse-horizontal show border-end">
@@ -186,4 +186,7 @@ export default {
 #logo {
   margin-left: 30px;
 }
+.navigation{
+  width: 250px
+}
 </style>
diff --git a/src/views/AdminEdit.vue b/src/views/AdminEdit.vue
index 4a8cac408719d21901016d95838b949503eccafa..f580e370318edf1ae952fda9a8f911569af37406 100644
--- a/src/views/AdminEdit.vue
+++ b/src/views/AdminEdit.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
                 <Sidebar></Sidebar>
@@ -46,6 +48,7 @@
                 </div>
             </div>
     </div>
+    </div>
 </template>
 
 <script>
@@ -66,6 +69,7 @@ export default {
             username: "",
             email: "",
             password: "",
+      nav_active : true,
         }
     },
     methods: {
diff --git a/src/views/AdminIndex.vue b/src/views/AdminIndex.vue
index 10e371870f16748f206ba9583c73c4b2408ff161..7362cadd9f5f6e305b66b705fd503f8f1d9d9646 100644
--- a/src/views/AdminIndex.vue
+++ b/src/views/AdminIndex.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
   <div class="container-fluid">
     <div class="row flex-nowrap">
       <Sidebar current_page="Admin"></Sidebar>
@@ -51,6 +53,7 @@
       </div>
     </div>
   </div>
+    </div>
 </template>
 
 <script>
@@ -97,6 +100,7 @@ export default {
 
       },
       filter: "",
+      nav_active : true,
     };
   },
   methods: {
diff --git a/src/views/AdminInsert.vue b/src/views/AdminInsert.vue
index 43b9bf95310f474f876b689db6c9ec8801e2d3f7..98c5a1b0d211cb936761cdc8277bcfd8a70c817d 100644
--- a/src/views/AdminInsert.vue
+++ b/src/views/AdminInsert.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
                 <Sidebar></Sidebar>
@@ -45,6 +47,7 @@
                 </div>
             </div>
     </div>
+    </div>
 </template>
 
 <script>
@@ -66,6 +69,7 @@ export default {
             username: "",
             email: "",
             password: "",
+      nav_active : true,
         }
     },
     methods: {
diff --git a/src/views/ChangePass.vue b/src/views/ChangePass.vue
index 18089ca9d1abaa50716850d95ef90531c9cd446a..3507d5fd03635fc362128a9c150b8f69ced613e8 100644
--- a/src/views/ChangePass.vue
+++ b/src/views/ChangePass.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
         <div class="row flex-nowrap">
             <Sidebar current_page = "About" />
@@ -22,6 +24,7 @@
             </div>
         </div>
     </div>
+    </div>
 </template>
 
 
@@ -45,6 +48,7 @@ export default {
             current_password: "",
             new_password:"",
             new_password_confirmation:"",
+      nav_active : true,
         }
     },
     methods: {
diff --git a/src/views/DepartemenIndex.vue b/src/views/DepartemenIndex.vue
index cf2c53a9821f2e5f145e80dd9db4991331ceb176..8442c4bc9f497359dc583178c8af2e1b02442c36 100644
--- a/src/views/DepartemenIndex.vue
+++ b/src/views/DepartemenIndex.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
   <div class="container-fluid">
     <div class="row flex-nowrap">
       <Sidebar current_page="Departemen"></Sidebar>
@@ -86,6 +88,7 @@
 			</template>
 	</Modal>
   </div>
+    </div>
 	
 </template>
 
@@ -147,6 +150,7 @@ export default {
         },
       },
       filter: "",
+      nav_active : true,
     };
   },
   props:{},
diff --git a/src/views/KaryawanDetail.vue b/src/views/KaryawanDetail.vue
index 3ec1e818cc31ac704702cac11486ff3816805a99..56d6afd5208e7129399192c0e5f8960e6a5ce69a 100644
--- a/src/views/KaryawanDetail.vue
+++ b/src/views/KaryawanDetail.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
                 <Sidebar></Sidebar>
@@ -69,6 +71,7 @@
                 </div>
             </div>
     </div>
+    </div>
 </template>
 
 <script>
@@ -181,6 +184,7 @@ export default {
                 },
             ],
             dept_last_page : 1,
+      nav_active : true,
         }
     },
     methods: {
diff --git a/src/views/KaryawanEdit.vue b/src/views/KaryawanEdit.vue
index 8ef90dba8f2929f33d5a5b7f297843cb3d89b7ad..bd91509f14b82243f8a4236e96167e6717bd19dd 100644
--- a/src/views/KaryawanEdit.vue
+++ b/src/views/KaryawanEdit.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
                 <Sidebar></Sidebar>
@@ -73,6 +75,7 @@
                 </div>
             </div>
     </div>
+    </div>
 </template>
 
 <script>
@@ -185,6 +188,7 @@ export default {
                 },
             ],
             dept_last_page : 1,
+      nav_active : true,
         }
     },
     methods: {
diff --git a/src/views/KaryawanInsert.vue b/src/views/KaryawanInsert.vue
index d80f6f7ac422543c94dd443b1807d6934c7fdf52..fd2213b1c122481a4b8535aa005f0d86c7940730 100644
--- a/src/views/KaryawanInsert.vue
+++ b/src/views/KaryawanInsert.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
                 <Sidebar></Sidebar>
@@ -73,6 +75,7 @@
                 </div>
             </div>
     </div>
+    </div>
 </template>
 
 <script>
@@ -105,6 +108,7 @@ export default {
             temp_dept: ["Keuangan", "Marketing", "Operasional"],
             temp_atasan: ["Yusuf", "Budi"],
             temp_jabatan: ["Manager", "Staf"],
+      nav_active : true,
         }
     },
     methods: {
diff --git a/src/views/KpiCreate.vue b/src/views/KpiCreate.vue
index 18201ffd5dce7418234dcab9e38617bbc250fc64..3c0b414f7252747bc6f3e645e878243f0ea7b437 100644
--- a/src/views/KpiCreate.vue
+++ b/src/views/KpiCreate.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
                 <Sidebar></Sidebar>
@@ -85,6 +87,7 @@
                 </div>
             </div>
     </div>
+    </div>
 </template>
 
 <script>
@@ -112,6 +115,7 @@ export default {
             period_type: "Daily",
             deadline: null,
             deadline_time: "",
+      nav_active : true,
         }
     },
     methods: {
diff --git a/src/views/KpiDetail.vue b/src/views/KpiDetail.vue
index c57967ed67a4859874762fdb4022dac97eccc792..51d5b69720da502cd34d09a20cdf011222af1dd7 100644
--- a/src/views/KpiDetail.vue
+++ b/src/views/KpiDetail.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
                 <Sidebar></Sidebar>
@@ -105,6 +107,7 @@
                 </div>
             </div>
     </div>
+    </div>
 </template>
 
 <script>
@@ -133,6 +136,7 @@ export default {
                 date : "",
                 images:[]
             },
+      nav_active : true,
         }
     },
     methods: {
diff --git a/src/views/KpiIndex.vue b/src/views/KpiIndex.vue
index cfb15412989a64cb88be37dd2df4fcaa485a776e..71d39c92d60d0e239fe61cf5f8949b674c47445b 100644
--- a/src/views/KpiIndex.vue
+++ b/src/views/KpiIndex.vue
@@ -1,9 +1,11 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
-                <Sidebar current_page = "About"></Sidebar>
+                <Sidebar current_page="KPI"></Sidebar>
                 <div class="col ps-md-2 pt-2">
-                    <Header></Header>
+                    <Header ></Header>
                         <!-- isi mulai di sini -->
                         <div class="col-6 mx-3 mb-3">
                             <select
@@ -50,6 +52,7 @@
             </div>
             
     </div>
+    </div>
 </template>
 
 <script>
@@ -86,6 +89,7 @@ export default {
             page_num : 0,
             entry_per_page: 10,
             pagination: [],
+      nav_active : true,
         }
     },
     methods: {
diff --git a/src/views/KpiManagerDetail.vue b/src/views/KpiManagerDetail.vue
index 6c197b0d3c3609c93d949fddb0de3d49ca0be929..18d2d28c413d05f014f1aadf912f4b057dcb314c 100644
--- a/src/views/KpiManagerDetail.vue
+++ b/src/views/KpiManagerDetail.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
                 <Sidebar></Sidebar>
@@ -106,6 +108,7 @@
                 </div>
             </div>
     </div>
+    </div>
 </template>
 
 <script>
@@ -196,6 +199,7 @@ export default {
             name: "Hadi",
             },
       ],
+      nav_active : true,
         }
     },
     methods: {
diff --git a/src/views/ManagerKaryawanDetail.vue b/src/views/ManagerKaryawanDetail.vue
index 5cdda1cd98bfb91abe2d8074bbaa011f0ab0243f..6452deafd4772c523f67fc3892e9c7c516d4b588 100644
--- a/src/views/ManagerKaryawanDetail.vue
+++ b/src/views/ManagerKaryawanDetail.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
                 <Sidebar current_page = "About"></Sidebar>
@@ -63,6 +65,7 @@
                 </div>
             </div>
     </div>
+    </div>
 </template>
 
 <script>
@@ -123,6 +126,7 @@ export default {
             endpoint:"",
             startReport : "",
             endReport:"",
+      nav_active : true,
         }
     },
     created(){
diff --git a/src/views/ManagerKaryawanIndex.vue b/src/views/ManagerKaryawanIndex.vue
index 2902c65b3478b0b15cbe073f65611f84e05f6357..862f75718fe20d03dfc151d42b3f85de748cd6a8 100644
--- a/src/views/ManagerKaryawanIndex.vue
+++ b/src/views/ManagerKaryawanIndex.vue
@@ -1,7 +1,9 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
-                <Sidebar current_page = "About"></Sidebar>
+                <Sidebar current_page = "Bawahan"></Sidebar>
                 <div class="col ps-md-2 pt-2">
                     <Header></Header>
                     <div class="row p-2">
@@ -22,6 +24,7 @@
                 </div>
             </div>
     </div>
+    </div>
 </template>
 
 <script>
@@ -63,7 +66,8 @@ export default {
                 hidden : false,
                 clickable : false
                 },
-            }
+            },
+      nav_active : true,
         }
     },
     methods: {
diff --git a/src/views/ManagerKpiIndex.vue b/src/views/ManagerKpiIndex.vue
index b444f2da0669095e2d06f81a27b97b7ed25ca8aa..4c0af268c5a2c5bb143555c2014cb2016aa0a1b9 100644
--- a/src/views/ManagerKpiIndex.vue
+++ b/src/views/ManagerKpiIndex.vue
@@ -1,7 +1,9 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
-                <Sidebar current_page = "About"></Sidebar>
+                <Sidebar current_page = "KPI Bawahan"></Sidebar>
                 <div class="col ps-md-2 pt-2">
                     <Header></Header>
                     <div class="row p-2">
@@ -41,6 +43,7 @@
                 </div>
             </div>
     </div>
+    </div>
 </template>
 
 <script>
@@ -94,6 +97,7 @@ export default {
                 data: "custom"},
             ],
             componentKey : 1,
+      nav_active : true,
         }
     },
     methods: {
diff --git a/src/views/ProfilAdmin.vue b/src/views/ProfilAdmin.vue
index 77608b071968001bda1c4ec4f7a770f8fa07751a..a4791f78a9402dc3f3b27f9b07be0679593a6342 100644
--- a/src/views/ProfilAdmin.vue
+++ b/src/views/ProfilAdmin.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
   <div class="container-fluid">
     <div class="row flex-nowrap">
       <Sidebar current_page="About"></Sidebar>
@@ -33,6 +35,7 @@
       </div>
     </div>
   </div>
+    </div>
 </template>
 
 <script>
@@ -49,7 +52,8 @@ export default {
   data(){
     return{
       username:"",
-      email:""
+      email:"",
+      nav_active : true,
     }
   },
   methods:{
diff --git a/src/views/ProfilUser.vue b/src/views/ProfilUser.vue
index f3c0e9f16590853454341d7d282982b0893333ee..7cd3c9d2a312c437f24b167cfb7627ab85e74cfe 100644
--- a/src/views/ProfilUser.vue
+++ b/src/views/ProfilUser.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
   <div class="container-fluid">
     <div class="row flex-nowrap">
       <Sidebar current_page="About"></Sidebar>
@@ -51,6 +53,7 @@
       </div>
     </div>
   </div>
+    </div>
 </template>
 
 <script>
@@ -75,7 +78,8 @@ export default {
       atasan:null,
       atasan_name:null,
       username:"",
-      email:""
+      email:"",
+      nav_active : true,
     };
     
   },
diff --git a/src/views/ResponseDetail.vue b/src/views/ResponseDetail.vue
index 8787d51a2dc4c94ccd3cbebb66b5b979bc158b21..301e1c80a07990337c4a2ef4d7687fea394ea9e9 100644
--- a/src/views/ResponseDetail.vue
+++ b/src/views/ResponseDetail.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
                 <Sidebar current_page = "About"></Sidebar>
@@ -70,6 +72,7 @@
                 </div>
             </div>
     </div>
+    </div>
     <!-- Adjust Modal -->
         <button hidden="hidden" type="button" class="btn" data-bs-toggle="modal" data-bs-target="#adjustModal" id="modalButton">
             Launch modal
@@ -147,7 +150,8 @@ export default {
             },
             emp: {},
             responseAdj:{},
-            newComment:""
+            newComment:"",
+      nav_active : true,
         }
     },
     created(){
diff --git a/src/views/ResponseEmployee.vue b/src/views/ResponseEmployee.vue
index d2e52d7b672c625457d093949634f0250c666430..3e1b9d6d44bc363b8f5c38277d21db9986e3a8de 100644
--- a/src/views/ResponseEmployee.vue
+++ b/src/views/ResponseEmployee.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
                 <Sidebar current_page = "About"></Sidebar>
@@ -64,6 +66,7 @@
                 </div>
             </div>
     </div>
+    </div>
     <!-- Comment Modal -->
             <div class="modal fade" id="commentModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered mx-auto">
@@ -121,7 +124,8 @@ export default {
             },
             emp: {},
             responseAdj:{},
-            newComment:""
+            newComment:"",
+      nav_active : true,
         }
     },
     created(){
diff --git a/src/views/ResponseIndex.vue b/src/views/ResponseIndex.vue
index 2b53667cc074f0c4eb62f5076862887b78e86727..bd631b8e827720c36d04175025c01e55ef7df3c8 100644
--- a/src/views/ResponseIndex.vue
+++ b/src/views/ResponseIndex.vue
@@ -1,4 +1,6 @@
 <template>
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
     <div class="container-fluid">
             <div class="row flex-nowrap">
                 <Sidebar current_page = "About"></Sidebar>
@@ -135,6 +137,7 @@
                 </div>
             </div>
     </div>
+    </div>
 </template>
 
 <script>
@@ -201,6 +204,7 @@ export default {
             showModal : false,
             responseAdj : {actual : 0},
             responseId : -1,
+      nav_active : true,
         }
     },
     created(){