clase interaccion entre todos los componentes completa y funcionando …

…correctamente :)

main.js

@@ -1,14 +1,18 @@
 const menuEmail = document.querySelector('.navbar-email');
 const menuHamIcon = document.querySelector('.menu');
 const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
+const productDetailCloseIcon =document.querySelector('.product-detail-close');
+
 const desktopMenu = document.querySelector('.desktop-menu');
 const mobileMenu = document.querySelector('.mobile-menu');
 const shoppingCartContainer = document.querySelector('#shoppingCartContainer');
 const cardsContainer = document.querySelector('.cards-container');
+const productDetailContainer =document.querySelector('#productDetail')
 
 menuEmail.addEventListener('click', toggleDesktopMenu);
 menuHamIcon.addEventListener('click', toggleMobileMenu);
 menuCarritoIcon.addEventListener('click', toggleCarritoAside);
+productDetailCloseIcon.addEventListener('click', closeProductDetailAside)
 
 function toggleDesktopMenu() {
   const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
@@ -27,6 +31,7 @@ function toggleMobileMenu() {
     shoppingCartContainer.classList.add('inactive'); 
   }
 
+  closeProductDetailAside();
   mobileMenu.classList.toggle('inactive');
 }
 
@@ -36,10 +41,26 @@ function toggleCarritoAside() {
   if (!isMobileMenuClosed) {
     mobileMenu.classList.add('inactive'); 
   }
+
+
+  const isProductDeatilclosed = productDetailContainer.classList.contains('inactive');
+
+  if (!isProductDeatilclosed) {
+    productDetailContainer.classList.add('inactive'); 
+  }
 
   shoppingCartContainer.classList.toggle('inactive');
 }
 
+function openProductDetailAside(){
+ shoppingCartContainer.classList.add('inactive');
+
+  productDetailContainer.classList.remove('inactive');
+}
+function closeProductDetailAside(){
+  productDetailContainer.classList.add('inactive');
+}
+
 const productList = [];
 productList.push({
   name: 'Bike',
@@ -81,7 +102,8 @@ function renderProducts(arr){
     // product= {name, price, image} -> product.image
     const productImg = document.createElement('img');
     productImg.setAttribute('src', product.image);
-
+    productImg.addEventListener('click',openProductDetailAside);
+
     const productInfo = document.createElement('div');
     productInfo.classList.add('product-info');