feat: show aside medu

Author: Rogerio Felix

index.html

@@ -94,6 +94,7 @@ <h3>Logoutt</h3>
 
         </aside>
 
+
         <main>
             <h1>Dashboard</h1>
 
@@ -312,6 +313,8 @@ <h3>Add Product</h3>
         </div>
 
     </div>
+    <span class="aside-overview"></span>
+
     <script src="./index.js"></script>
 </body>
 

index.js

@@ -2,13 +2,21 @@ const sideMenu = document.querySelector("aside");
 const menuBtn = document.querySelector("#btn-menu");
 const closeBtn = document.querySelector("#btn-close");
 const themeThoggler = document.querySelector(".theme-toggler");
+const asideOverview = document.querySelector(".aside-overview");
 
+const toggleMenu = () => {
+  document.body.classList.toggle("show-menu");
+  document.body.classList.toggle("fixed-scroll");
+};
 menuBtn.addEventListener("click", () => {
-  sideMenu.style.display = "block";
+  toggleMenu();
 });
 
 closeBtn.addEventListener("click", () => {
-  sideMenu.style.display = "none";
+  toggleMenu();
+});
+asideOverview.addEventListener("click", () => {
+  toggleMenu();
 });
 
 themeThoggler.addEventListener("click", () => {

style.css

@@ -60,6 +60,10 @@ body {
   overflow-x: hidden;
   color: var(--color-dark);
 }
+body.fixed-scroll {
+  position: fixed;
+  overflow-y: scroll;
+}
 
 .container {
   display: grid;
@@ -531,14 +535,29 @@ main table tbody tr:last-child td {
     box-shadow: 1rem 3rem 4rem var(--color-light);
     height: 100vh;
     padding-right: var(--card-padding);
+    display: block;
+    transition: left 0.275s ease;
+  }
+  .show-menu aside {
+    left: 0;
+  }
+  .aside-overview {
     display: none;
-    animation: showMenu 275ms ease forwards;
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    transition: left 0.4s ease;
   }
-
-  @keyframes showMenu {
-    to {
-      left: 0;
-    }
+  .show-menu .aside-overview {
+    display: block;
+    opacity: 0.25;
   }
 
   aside .logo {