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>

src/layouts/AdminLayout.vue

@@ -8,7 +8,7 @@
 <template>
     <div class="wrapper">
         <Sidebar/>
-        <div class="content">
+        <div class="main-panel" id="main-panel">
             <NavBar/>
             <div class="view">
                 <RouterView />
@@ -20,24 +20,37 @@
 
 <style lang="scss" scoped>
     .wrapper {
+        position: relative;
+        width: 100wv;
+        top: 0;
+        height: 100vh; 
         display: flex;
-        width: 100%;
-        align-items: stretch;
         background-color: #f6f3f3;
     }
     
+    .main-panel {
+        position: relative;
+        margin-left: 220px;
+        width: calc(100wv - 220px) !important;
+    }
+
     .view {
-        margin: 24px 50px;
-        // width: calc(100vw - 260px);
+        width: 100%;
+        padding: 24px 50px;
     }
 
     @media (max-width: 1400px) {
         .view {
-            margin: 24px 24px;
+            padding: 24px 24px;
         }
     }
 
     @media (max-width: 768px) {
+        .main-panel {
+            position: relative;
+            margin-left: 0px;
+            width: 100wv !important;
+        }
         .view {
             margin: 24px 12px;
         }