fix: sidebar

src/components/NavBar.vue

@@ -6,12 +6,13 @@
      $(document).ready(function() {
         $('#sidebarCollapse').on('click', function () {
             $('#sidebar').toggleClass('active');
+            $('#custom-navbar').toggleClass('active');
         });
     });
 </script>
 
 <template>
-    <nav class="navbar navbar-expand-lg navbar-light custom-navbar">
+    <nav class="navbar navbar-expand-lg navbar-light custom-navbar" id="custom-navbar">
             <div class="nav-items">
                 <button type="button" id="sidebarCollapse" class="btn btn-info btn-menu">
                     <i class="fas fa-align-left"></i>
@@ -70,6 +71,12 @@
         color: #282727;
     }
 
+    #custom-navbar.active {
+        margin-left: 220px;
+        display: block;
+        width: calc(100% - 220px) !important;
+    }
+
     @media (max-width: 768px) {
 
         .custom-navbar {

src/components/Sidebar.vue

@@ -124,10 +124,15 @@
 
 <style lang="scss" scoped>
     #sidebar {
+        position: fixed;
         display: flex;
         flex-direction: column;
+        top: 0;
+        height: 100%;
+        bottom: 0;
         width: 220px;
-        min-height: 100vh;
+        left: 0;
+        z-index: 1030;
         background: #323030;
         color: #FFF;
         filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
@@ -154,6 +159,11 @@
         font-weight: 900;
     }
 
+    #sidebar.active {
+        position: fixed;
+    }
+
+
     #sidebar ul li {
         display: flex;
         justify-content: space-between;
@@ -223,11 +233,12 @@
     @media (max-width: 768px) {
 
         #sidebar {
-            margin-left: -220px;
+            position: relative;
+            height: 100vh;
+            overflow: auto;
+            width: 220px;
+            z-index: 4;
             
         }
-        #sidebar.active {
-            margin-left: 0;
-        }
     }
 </style>