fixing experience pop-ups menu

index.html

@@ -105,7 +105,7 @@
         </ul>
       </div>
   </nav>
-  <aside class="product-detail inactive">
+  <aside id="shoppingCartContainer" class="inactive">
     <div class="title-container">
       <img src="./icons/flechita.svg" alt="arrow">
       <p class="title">My order</p>
@@ -153,6 +153,22 @@
   </div>
   </aside>
 
+  <aside id="productDetail" class="inactive">
+    <div class="product-detail-close">
+      <img src="./icons/icon_close.png" alt="close">
+    </div>
+    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
+    <div class="product-info">
+      <p>$35,00</p>
+      <p>Bike</p>
+      <p>With its practical position, this bike also fulfills a decorative function, add your hall or workspace.</p>
+      <button class="primary-button add-to-cart-button">
+        <img src="./icons/bt_add_to_cart.svg" alt="add to cart">
+        Add to cart
+      </button>
+    </div>
+  </aside>
+
   <section class="main-container">
     <div class="cards-container">
 

main.js

@@ -3,28 +3,28 @@ const burgerMenu = document.querySelector(".menu");
 const iconCardtMenu = document.querySelector(".navbar-shopping-cart");
 const desktopMenu = document.querySelector(".desktop-menu");
 const mobileMenu = document.querySelector(".mobile-menu");
-const aside = document.querySelector(".product-detail");
+const shoppingCartContainer = document.querySelector("#shoppingCartContainer");
 const cardsContainer = document.querySelector(".cards-container");
 
 menuEmail.addEventListener("click", toggleDesktopMenu);
 burgerMenu.addEventListener("click", toggleMobileMenu);
 iconCardtMenu.addEventListener("click", toggleIconCartMenu);
 
 function toggleDesktopMenu() {
-    const isIconCardtMenuClosed = aside.classList.contains("inactive");
+    const isIconCardtMenuClosed = shoppingCartContainer.classList.contains("inactive");
 
   if (!isIconCardtMenuClosed) {
-    aside.classList.add("inactive");
+    shoppingCartContainer.classList.add("inactive");
   }
   mobileMenu.classList.toggle("inactive");
   desktopMenu.classList.toggle("inactive");
 }
 
 function toggleMobileMenu() {
-    const isIconCardtMenuClosed = aside.classList.contains("inactive");
+    const isIconCardtMenuClosed = shoppingCartContainer.classList.contains("inactive");
 
   if (!isIconCardtMenuClosed) {
-    aside.classList.add("inactive");
+    shoppingCartContainer.classList.add("inactive");
   }
   mobileMenu.classList.toggle("inactive");
 }
@@ -35,7 +35,7 @@ function toggleIconCartMenu() {
   if (!isMobileMenuClosed) {
     mobileMenu.classList.add("inactive");
   }
-  aside.classList.toggle("inactive");
+  shoppingCartContainer.classList.toggle("inactive");
 }
 
 const productList = [];

style.css

@@ -147,8 +147,10 @@ nav {
 .mobile-menu {
     position: absolute;
     background-color: var(--white);
-    top: 60px;
-    padding: 24px;
+    top: 61px;
+    width: calc(100% - 24px);
+    padding-left: 24px;
+    left: 0;
 }
 
 .mobile-menu a {
@@ -185,15 +187,18 @@ nav {
 /* Aside - Product - Detail */
 
 
-.product-detail {
+aside {
     background-color: var(--white);
     width: 360px;
-    padding: 0 24px;
     box-sizing: border-box;
     position: absolute;
     right: 0;
 }
 
+/* Shopping - Cart */
+#shoppingCartContainer {
+    padding: 0 24px;
+}
 .title-container {
     display: flex;
 }
@@ -274,6 +279,66 @@ nav {
     height: 50px;
 }
 
+/* Product - Detail */
+
+.product-detail-close {
+    background: var(--white);
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    top: 24px;
+    left: 24px;
+    z-index: 2;
+    padding: 12px;
+    border-radius: 50%;
+  }
+  .product-detail-close:hover {
+    cursor: pointer;
+  }
+   #productDetail > img:nth-child(2) {
+    width: 100%;
+    height: 360px;
+    object-fit: cover;
+    border-radius: 0 0 20px 20px;
+  }
+  #productDetail .product-info {
+    margin: 24px 24px 0 24px;
+  }
+  #productDetail .product-info p:nth-child(1) {
+    font-weight: bold;
+    font-size: var(--md);
+    margin-top: 0;
+    margin-bottom: 4px;
+  }
+  #productDetail .product-info p:nth-child(2) {
+    color: var(--very-light-pink);
+    font-size: var(--md);
+    margin-top: 0;
+    margin-bottom: 36px;
+  }
+  #productDetail .product-info p:nth-child(3) {
+    color: var(--very-light-pink);
+    font-size: var(--sm);
+    margin-top: 0;
+    margin-bottom: 36px;
+  }
+  .primary-button {
+    background-color: var(--hospital-green);
+    border-radius: 8px;
+    border: none;
+    color: var(--white);
+    width: 100%;
+    cursor: pointer;
+    font-size: var(--md);
+    font-weight: bold;
+    height: 50px;
+  }
+  .add-to-cart-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
 /* Product - List */
 
 .cards-container {
@@ -295,30 +360,30 @@ nav {
     object-fit: cover;
 }
 
-.product-info {
+.product-card .product-info {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 12px;
 }
 
-.product-info figure {
+.product-card .product-info figure {
     margin: 0;
 }
 
-.product-info figure img {
+.product-card .product-info figure img {
     width: 35px;
     height: 35px;
 }
 
-.product-info div p:nth-child(1) {
+.product-card .product-info div p:nth-child(1) {
     font-weight: bold;
     font-size: var(--md);
     margin-top: 0;
     margin-bottom: 4px;
 }
 
-.product-info div p:nth-child(2) {
+.product-card .product-info div p:nth-child(2) {
     font-size: var(--sm);
     margin-top: 0;
     margin-bottom: 0;