Interacción entre todos los componentes

Personalmente, resolvi todas las funciones del siguiente modo. Me parece mucho mas sencillo y probe todas las combinaciones de colisiones posibles y funciona todo a la perfeccion. Al principio tenia la duda de que se podria llegar a añadir la clase de inactive mas de una vez a los elementos, rompiendo todo el codigo, pero finalmente pude observar que eso no ocurria.
PD: algunos nombres son diferentes, como el de orderDetail, porque asi fue mi solucion al conflicto de la clase pasada, pero funciona con cualquier nombre.

al principio no me sentia convencido de estar en este curso, pero ahora que he avanzado un poco, solo digo tu eres un maquina.

Esta fue mi solución para abrir y cerrar elementos según fuera el caso. Utilicé una función que recibe como parámetros el principal elemento a abrir (o cerrar), un array de los demás elementos que se deberían cerrar, y por último un valor booleano para indicar si unicamente se quiere abrir el elemento.

function toggleDesktopMenu() {
  toggleDisplayedViews(desktopMenu, [shoppingCartView, productDetailsPanel]);
}

function toggleMobileMenu() {
  toggleDisplayedViews(mobileMenu, [shoppingCartView, productDetailsPanel]);
}

function toggleCartAside() {
  toggleDisplayedViews(shoppingCartView, [desktopMenu, mobileMenu, productDetailsPanel]);
}

function toggleProductDetailsAside(event) {
  var open = event.path[1].classList.contains("product-card");
  toggleDisplayedViews(productDetailsPanel, [desktopMenu, mobileMenu, shoppingCartView], open);
}

function toggleDisplayedViews(elementToDisplay, elementsToHide, onlyOpen = false) {
  for (let element of elementsToHide) {
    const isElementDisplayed = !element.classList.contains("inactive");

    if (isElementDisplayed) {
      element.classList.toggle("inactive");
    }
  }

  if (onlyOpen) {
    elementToDisplay.classList.remove("inactive");
    return;
  }

  elementToDisplay.classList.toggle("inactive");
}

De igual forma, considero que se puede cerrar y abrir los elementos de esta forma:

queria que los datos del aside fueran dinamicos y mostraran los datos de cada uno, es decir, si un producto tenia el precio de $20 que mostrara al abrir el aside los $20 y asi con cada uno… entonces ME ROMPI LA CABEZA tratando de hacerlo con el for que utilizo el profe para crear los productos y para mi fue mision imposible ya que siempre me arrojaba los datos del ultimo objeto del arreglo… ENTONCES PROBÉ —> “foreach()” este metodo TE FACILITA LA VIDA… ya que recorre cada elemento de cada arreglo extrayendo los datos que desees de cada uno sin ningun problema y con un codigo super resumido y limpio… asi que mis amigos… les recomiedo al 1000% foreach… les comparto un poco mi codigo

const showProductsOnScreen= (lista)=>{ //crea los productos en el menu
    
    lista.forEach(product => { //recorre cada elemento del arreglo
        const productCard= document.createElement('div');
        productCard.classList.add('product-card');

        productCard.addEventListener('click',()=>{ //evento de escucha
            openProductInfo(product); //llamo a la funcion

        })

        const image = document.createElement('img');
        image.src= product.img;
        
        const infoProduct = document.createElement('div');
        infoProduct.classList.add('product-info');
        
        const div = document.createElement('div');
        const infoPrice = document.createElement('p');
        infoPrice.innerHTML = '$'+ product.price;
        
        const infoName = document.createElement('p');
        infoName.innerHTML= product.name;
        const figure = document.createElement('figure');
        const figureImg = document.createElement('img');
        figureImg.src= "./icons/bt_add_to_cart.svg";
        
        
        //AGREGAR HTML
        div.appendChild(infoPrice);
        div.appendChild(infoName);
        figure.appendChild(figureImg);
        infoProduct.appendChild(div);
        infoProduct.appendChild(figure);
        productCard.appendChild(image);
        productCard.appendChild(infoProduct);
        cardsContainer.appendChild(productCard);
        mainContainer.appendChild(cardsContainer);
        
    });

const openProductInfo = (product)=>{ //muestra el aside con la info del producto seleccionado
    const aside = document.querySelector('.product-detail-main');
    const productImg = document.querySelector('.product-detail-main-img');
    const productPrice = document.querySelector('.product-info .product-price');
    const productName= document.querySelector('.product-info .product-name');
        aside.classList.remove('inactive');
        productImg.setAttribute('src',product.img);
        productPrice.textContent= product.price;
        productName.textContent= product.name;


}

Quería que los productos del aside mostraran los datos de cada producto al cual le daba click, aquí dejo la solución que le di al problema.

Cree la funcion displayInfoInProductDetail , la cual recibe como parámetro un evento(en este caso el evento resultado del click) , la cual llamo en openProductDetailAside

function openProductDetailAside(event){    

    displayInfoInProductDetail(event);

    desktopMenu.classList.add('inactive');
    shoppingCartContainer.classList.add('inactive');
    
    productDetailContainer.classList.remove('inactive');
}

La función displayInfoInProductDetail quedo de la siguiente forma, tratare de explicarlo lo mejor que pueda.

function displayInfoInProductDetail(event){
    
    const new_img_product_detail = event.path[0].src;

    const product_info = event.path[1].childNodes[1];

    const price = product_info.querySelector('div p:first-child');
    const name = product_info.querySelector('div p:nth-child(2)');

    const product_detail_img = productDetailContainer.querySelector('img:nth-child(2)');
    product_detail_img.setAttribute('src', new_img_product_detail);
    product_detail_img.setAttribute('alt', name.textContent);

    const product_detail_price = productDetailContainer.querySelector('.product-info p:nth-child(1)');
    product_detail_price.innerText = price.textContent;

    const product_detail_name = productDetailContainer.querySelector('.product-info p:nth-child(2)');
    product_detail_name.innerText = name.textContent;
    
}

si hacemos un console.log(event), veriamos lo siguiente

si lo desplegamos y hacemos scroll hasta hasta el elemto path, y tambien desplegamos este veremos lo siguente:

si pasamos el mouse sobre cada elemento que se encuentra dentro del path veremos lo que selecciona en pantalla.

entonces como vemos lo que haría la primera linea de la función displayInfoInProductDetail , es obtener el valor del atributo src de la imagen

const new_img_product_detail = event.path[0].src;

Luego si desplegamos el elemento de la posición 1 de path, buscamos el elemento childNodes veremos que el elemto de la posicion 1 en childNotees es el <div> con la clase product-info, una vez selecionado, usando el querySelector accedemos a las dos <p> correspondientes al precio y nombre del producto.

una vez selecionados y almacenos(en varibles) estos elemtos, los asignarimos en los lugares correnpodientes del productDetailContainer

HACIENDO QUE APAREZCA CADA PRODUCTO EN EL DETALLE DEL PRODUCTO.

Mostrar productos en el aside dependiendo de que producto se seleccione.

HTML

dejamos el aside pero con los elementos vació, colocamos id para la imagen y los párrafos.

<!-- detalle de producto -->
  <aside id="productDetail" class="inactive">
    <div class="product-detail-close">
      <img src="./icons/icon_close.png" alt="close">
    </div>
    <img src="" alt="bike" id="img_product">
    <div class="product-info">
      <p id="product_price"></p>
      <p id="product_name"></p>
      <p id="product_descrip"></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>

JAVASCRIPT

seleccionamos la imagen creada en el array de productos y le colocamos el evento click.

// evento para mostrar producto
        producImg.addEventListener("click",() => {
            mostrarProductDetail(element);
        });

Creamos la función para mostrar el producto respectivo. Acá haremos uso de los id’s para ir agregando su respectiva propiedad.

// función para mostrar detalle del producto
const mostrarProductDetail = elemento =>{
    aside.classList.remove("inactive");

    const imgProduct = document.querySelector('#img_product');
    imgProduct.src = elemento.imagen;

    const priceProd = document.querySelector('#product_price');
    priceProd.textContent = 'Q.'+elemento.price;
    const nameProd = document.querySelector('#product_name');
    nameProd.textContent = elemento.name;
    const descripProd = document.querySelector('#product_descrip');
    descripProd.textContent = elemento.descrip;
}

RESULTADO

Buenas amigos, encontré un error debido a que agregué 15 elementos a la lista de productos, en el cual me di cuenta que el aside del detalle de producto tenía una falla entre el botón y el contenido, me salía de esta forma![](

Entonces me puse a revisar un poco mi css y primero intenté agregarle un background y no me funcionó, entonces revisando el propio contenedor en donde los tenía vi que tenía un margin ![](

Entonces pensé, y si en lugar de ponerle margin, le pongo un padding y de esa forma agarro el contenedor completo? y así lo hice, le agregué a mis estilos de ese contenedor estas clases

    padding: 24px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: var(--white);

y con eso logré resolverlo
![](

🚀 Solución, para que cuando le des click en cualquier producto, muestre los detalles del producto seleccionado (name, price, image). 🚀

Utilice:

event.target.src => Al hacer clic en la imagen, obtenemos su atributo src.
event.target.nextElementSibling.innerText =>  Al hacer click en la imagen, devuelve el siguiente elemento en el mismo nivel del árbol.

Código:

const navEmail = 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 productDetailContainer = document.querySelector("#productDetail");
const cardsContainer = document.querySelector(".cards-container");
const imagen = document.querySelector("#infoImages");
const priceProduct = document.querySelector("#price");

//const mediaQuery = window.matchMedia("(max-width: 640px)");

navEmail.addEventListener("click", toggleDesktopMenu);
menuHamIcon.addEventListener("click",  toggleMobileMenu);
menuCarritoIcon.addEventListener("click", toggleCarritoAside);
productDetailCloseIcon.addEventListener("click", closeProductDetailAside);

function toggleDesktopMenu() {
    const isAsideClose = shoppingCartContainer.classList.contains("inactive");
    const isproductDetailContainer = productDetailContainer.classList.contains("inactive");

    desktopMenu.classList.toggle("inactive");

    if(!isAsideClose){
        shoppingCartContainer.classList.add("inactive");
    }

    if(!isproductDetailContainer){
        productDetailContainer.classList.add("inactive");
    }
// //     // if(!desktopMenu.classList.toggle("inactive")){
// //     //     desktopMenu.classList.remove("inactive");
// //     //  }else{
// //     //     desktopMenu.classList.add("inactive");
// //     //  }
    
}

function toggleMobileMenu() {
    const isAsideClose = shoppingCartContainer.classList.contains("inactive");

    mobileMenu.classList.toggle("inactive"); //Si esta lo elimina, si no esta lo activa 
    if(!isAsideClose){
        shoppingCartContainer.classList.add("inactive");
    }
    closeProductDetailAside();
}

function toggleCarritoAside(){    
    const isMobileMenuClose =  mobileMenu.classList.contains("inactive");
    const isDesktopMenuClose = desktopMenu.classList.contains("inactive"); // El elemento contiene la clase inactive = true (cerrado)
                                                                           // El elemento no contiene la clase inactive = falso (abierto)
    const isProductDetailClose = productDetailContainer.classList.contains("inactive");

    shoppingCartContainer.classList.toggle("inactive");
    if(!isMobileMenuClose){ // si esta abierto 
        mobileMenu.classList.add("inactive");
    }

    if(!isDesktopMenuClose){
        desktopMenu.classList.add("inactive")
    }   

    if(!isProductDetailClose){
        productDetailContainer.classList.add("inactive");
    }
}

function openProductDetailAside(event){
    shoppingCartContainer.classList.add("inactive");
    mobileMenu.classList.add("inactive");
    productDetailContainer.classList.remove("inactive");
    desktopMenu.classList.add("inactive");
    imagen.setAttribute("src", event.target.src);
    priceProduct.innerText = event.target.nextElementSibling.innerText; 
}

function closeProductDetailAside(){
    productDetailContainer.classList.add("inactive");
}


//Utilizando solo una función para mostrar los menus
//  function toggleMenus (){
//      if(mediaQuery.matches){
//          mobileMenu.classList.toggle("inactive");

//      } else {
//          desktopMenu.classList.toggle("inactive");
//      }
    
//  }

const productList = [];
productList.push({
    name: "Acelerómetro ADXL345",
    price: 11600,
    image: "https://moviltronics.com/wp-content/uploads/2015/10/1538-thickbox_default-Modulo-Acelerometro-3-ejes-ADXL345-600x600.jpg",
});
productList.push({
    name: "Arduino Nano CH340",
    price: 48200,
    image: "https://moviltronics.com/wp-content/uploads/2018/06/M10009-600x450.png",
});
productList.push({
    name: "Paquete Resistencias surtidas",
    price: 2500,
    image: "https://moviltronics.com/wp-content/uploads/2020/05/Resistencias-600x600.jpg",
})
productList.push({
    name: "Bluetooth CC2541",
    price: 23000,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/2083-thickbox_default-Modulo-Bluetooth-CC2541-600x600.jpg",
})
productList.push({
    name: "Potenciómetro Sencillo",
    price: 900,
    image: "https://moviltronics.com/wp-content/uploads/2019/10/56-1-600x585.jpg",
})
productList.push({
    name: "Brazo Robotico Dobot Magician Basic",
    price: 9200,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/2471-thickbox_default-Brazo-Robotico-Dobot-Magician-Basic-600x600.jpg",
})
productList.push({
    name: "Chasis Mini Sumo",
    price: 199000,
    image: "https://moviltronics.com/wp-content/uploads/2019/07/Chasis-Mini-Sumo_0000_DSC00342-600x600.jpg",
})
productList.push({
    name: "Kit Arduino Starter",
    price: 264600,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/Kit-Arduino-Starter-600x600.jpg",
}) 
productList.push({
    name: "Kit Arduino Starter",
    price: 264600,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/Kit-Arduino-Starter-600x600.jpg",
}) 
productList.push({
    name: "Kit Arduino Starter",
    price: 264600,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/Kit-Arduino-Starter-600x600.jpg",
}) 
productList.push({
    name: "Kit Arduino Starter",
    price: 264600,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/Kit-Arduino-Starter-600x600.jpg",
}) 
productList.push({
    name: "Kit Arduino Starter",
    price: 264600,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/Kit-Arduino-Starter-600x600.jpg",
}) 
productList.push({
    name: "Kit Arduino Starter",
    price: 264600,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/Kit-Arduino-Starter-600x600.jpg",
}) 
productList.push({
    name: "Kit Arduino Starter",
    price: 264600,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/Kit-Arduino-Starter-600x600.jpg",
}) 

function renderProducts(arr){
    for(product of arr){
        const productCard = document.createElement("div");
            productCard.classList.add("product-card");
    
        //product = {name, price, image} -> product.image
        const productImg = document.createElement("img");
            productImg.setAttribute("src", product.image);
            productImg.setAttribute("id", "imagen");
            productImg.addEventListener("click", openProductDetailAside);

        const productInfo = document.createElement("div");
            productInfo.classList.add("product-info");
    
        const productInfoDiv = document.createElement("div");
    
        const productInfoPrice = document.createElement("p");
            productInfoPrice.innerText = "$ " + product.price;
    
        const productInfoName = document.createElement("p");
            productInfoName.innerText = product.name;
    
            productInfoDiv.appendChild(productInfoPrice);
            productInfoDiv.appendChild(productInfoName);
    
        const productInfofigure = document.createElement("figure");
    
        const productImgCart = document.createElement("img");
            productImgCart.setAttribute("src", "./icons/bt_add_to_cart.svg");
    
        productInfofigure.appendChild(productImgCart);
        
        productInfo.appendChild(productInfoDiv);
        productInfo.appendChild(productInfofigure);
    
        productCard.appendChild(productImg);
        productCard.appendChild(productInfo);
    
        cardsContainer.appendChild(productCard);
    }
}
renderProducts(productList);

Mi solución fue completamente diferente

 
Lo que hice fue básicamente generar una constante que tuviera las conexiones e irlas iterando

connect ['.navbar-email'] ='.desktop-menu';
connect ['.menu'] ='.mobile-menu';
connect ['.navbar-shopping-cart'] ='.product-detail-shopping-cart';
const productInfo = connect ['.product-detail-close'] = '.product-detail-info';

también decidí agregarle un distintivo a product-detail como info y shopping-cart
 
si quieren checar el código completo se los dejo en mi github por si alguien le interesa
 

const signals= {};
const connect = {};

connect ['.navbar-email'] ='.desktop-menu';
connect ['.menu'] ='.mobile-menu';
connect ['.navbar-shopping-cart'] ='.product-detail-shopping-cart';
const productInfo = connect ['.product-detail-close'] = '.product-detail-info';


function connections(connect_ref){
    for(let SLOT in connect_ref){
      const SIGNAL = connect_ref[SLOT];
      const slot = document.querySelector(`${SLOT}`);
      signals[SIGNAL] = document.querySelector(`${SIGNAL}`);
      
      showEventListener(slot, signals[SIGNAL], SIGNAL);}}


function showEventListener(slot, signal, exception, __function__ = undefined){
    slot.addEventListener('click', ()=>{
        signal.classList.toggle('visible');
        for(let s in signals)
            if(s != exception) signals[s].classList.add('visible');
            
        if(typeof(__function__) == 'function')  __function__();}); }


const bicis = ['https://m.media-amazon.com/images/I/81-L-Q-0Q1L._AC_SX569_.jpg',
               'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
               'https://http2.mlstatic.com/D_NQ_NP_671487-MLM50849732725_072022-O.webp',
               'https://resources.claroshop.com/medios-plazavip/mkt/5bd8e4bf90990_1jpg.jpg'];


function products(){
    const productos = new Array();
    for(let img of bicis)
        productos.push({['name']:'Bike', ['price']:120, ['img']:img});
    return productos;}


function connectProductRender(selector, product){
    const img = document.querySelector('.img-product-detail-info');
    const slot = document.querySelector(`.${selector}`);

    showEventListener(slot, signals[productInfo], productInfo,()=>{
        signals[productInfo].classList.remove('visible');
        img.setAttribute('src', product.img);});}


function productRender(arr){
    let idx = 0;
    const contenedor = document.querySelector('.cards-container');
    
    for(const product of arr){
        const productCard = document.createElement('div');
        productCard.classList.add('product-card');
        productCard.classList.add(`N${idx}`);
        
        const img = document.createElement('img');
        img.setAttribute('src', product.img);

        const productInfo = document.createElement('div');
        productInfo.classList.add('product-info');

        const div = document.createElement('div');
        div.innerHTML =`<p>\$${product.price}</p><p>${product.name}</p>`;

        const figure = document.createElement('figure');
        figure.innerHTML = '<img src="./icons/bt_add_to_cart.svg">';

        productInfo.append(div,figure);
        productCard.append(img,productInfo);
        contenedor.appendChild(productCard);

        connectProductRender(`N${idx}`,product);
        idx++;}}

/* main */

connections(connect);
productRender(products());

Faltaba que se cerraran los menú en mobile y desktop, cuando se abría el detalle del producto.
Así lo solucioné:

function openProductDetail () {
    desktopMenu.classList.add ("inactive")
    shoppingCartContainer.classList.add ("inactive")
    mobileMenu.classList.add ("inactive")

    productDetailContainer.classList.remove ("inactive") 
}

Se sentía un poco raro que el aside de los detalles del producto no mostrara los detalles del producto seleccionado, entonces decidí agregarle eso y hacerle los bordes redondos a los menus y también agregarles un sombreado para que se diferenciara un poco donde termianaban.

Código JavaScript:
No voy a colocar todo el código porque ya todos lo tenemos. Solo las partes que agregué.

//Hay que agregarle un id a las etiquetas para precio e imagen del aside
const productDetailPrice = document.querySelector('#productDetail-price');
const productDetailImg = document.querySelector('#productDetail-img');

//En la función para abrir el aside "openProductDetailAside" 
productDetailImg.setAttribute("src", event.target.src);
    productDetailPrice.innerText = event.target.nextElementSibling.innerText; 

Código CSS:

.desktop-menu {
/*...
...
...*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.mobile-menu {
/*...
...
...*/
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

Aside {
/*...
...
...*/
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

#productDetail {
    margin-right: 5px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }

Así le hice para que al momento de mostrar el product info, muestre la imagen del producto seleccionado, tambien se podria hacer lo mismo con el precio nombre y descripción

Yo me percate que esta el icono de volver (como para quitar el menu del carrito de compras) y lo que hice fue lo siguiente:
HTML
<img src="./icons/flechita.svg" alt=“arrow” class=“icon1”>
JS
const iconCarritoBack = document.querySelector(".icon1");
iconCarritoBack.addEventListener(“click”, closeCarritoAside);
function closeCarritoAside () {
shoppingCartContainer.classList.add(“inactive”);
}

Mi propuesta es crear una función que reciba cómo parámetros el elemento a poner visible, y un array de los elementos a hacer invisibles

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 productDetailContainer = document.querySelector('#productDetail');

menuEmail.addEventListener('click', () => toggleAside(desktopMenu));
menuHamIcon.addEventListener('click', () => toggleAside(mobileMenu));
menuCarritoIcon.addEventListener('click', () => toggleAside(shoppingCartContainer, [mobileMenu, productDetailContainer]));
productDetailCloseIcon.addEventListener('click', () => toggleAside(productDetailContainer));

function toggleAside(element, hide = []) {
  hide.forEach(el => el.classList.add('inactive'));
  element.classList.toggle('inactive');
}

Yo cree esas dos funciones y las utilizo dentro de las demas que hacen el toggle de los demas iconos

function verifyOpeningAsideShoppingCart() {
    const isAsideOpen = !shoppingCartContainer.classList.contains('inactive');

    if (isAsideOpen) {
        shoppingCartContainer.classList.add('inactive')
    }
}

function verifyOpeningAsideProductDetail() {
    const isProductDetailOpen = !productDetailContainer.classList.toggle('inactive');

    if (isProductDetailOpen) {
        closeProductDetailAside()
    }
}

Lo que yo haria seria meter en un array todas las variables de ventanas que se pueden abrir, luego crear una funcion que reciba el nombre de la ventana objetivo que se abrirar, en esta funcion al principio va a recorrer el array con todas las ventanas agregandole a cada una(sin excepcion) la clase “hidden” lo cual las va a esconder, luego de esto al final de la funcion vas a remover la clase ‘‘hidden’’ anteriormente agregada de la ventana objetivo que se desea abrir, de esta forma solo se mostraria la ventana deseada y ocultaria las demas.

Para la ejecución de esta interacción decidí usar el operador ternario, junto con un arrray.

Primero cree un array donde guarde los selectores en los cuales necesito usar la clase “inactive”, estos que se sobreponen cuando los uso:

const windowsList = [];

windowsList.push(shoppingCartContainer);
windowsList.push(desktopMenu);
windowsList.push(mobileMenu);
windowsList.push(productDetailContainer);

Luego cree una función que me verifica dos cosas, primero en cual de estos estoy generando la llamada, y segundo cual de los otros esta “activo” por asi decirlo:

function closeSuperImposeWindow(element, array) {
    // Aqui verificamos cual de los que hay en la lista genero la llamada
    for (item of array) {
        item == element ? true
            // con el ternario cuando no es el que genero la llamada verifico si esta cerrado, sino le inserto la clase inactive
            : item.classList.contains('inactive') ? true : item.classList.add('inactive');
    }
}

Asi solo tuve que llamar a la funcion cada vez que hago toggle o abro una pestaña y esto permite cerrar el resto de las pestañas.

function openProductDetailAside() {
    closeSuperImposeWindow(productDetailContainer, windowsList);
    productDetailContainer.classList.remove('inactive');
    
}

function toggleMobileMenu() {
    // shoppingCartContainer.classList.contains('inactive') ? true : shoppingCartContainer.classList.add('inactive');
    closeSuperImposeWindow(mobileMenu, windowsList);
    mobileMenu.classList.toggle('inactive');
    
}

Y ya, es toda wey.

Para resolver el tema de las visualizaciones creé una función que oculta cualquier “objeto” visible que no sea el que quiero mostrar y la llamo en cada función de mostrar/ocultar un objeto.
arr es un array con los objetos que aparecen o desaparecen en pantalla y obj es el objeto que quiero mostrar.

function hideElements(arr,obj){
    for (element of arr){
        if(!element.classList.contains("inactive") && element!=obj){
            element.classList.add("inactive");
        }
    }
}

fALTO ARREGLAR EL mENU EMAIL.

LO CORREGI ASI :

unction toggleDesktopMenu() {
const isAsideClosed = shoppingCartContainer.classList.contains(“inactive”);

if (!isAsideClosed) {
shoppingCartContainer.classList.add(“inactive”);
}
closeProductDetailAside();

desktopMenu.classList.toggle(“inactive”);
}

Aún que mi código no es el más optimizado que digamos…¡funciona! y me siento muy feliz por ello. Supongo que con la practica mi código dejara de se tan “spaghetti” 🦉👽🏆

<function toggleDesktop_menu (){
    closeShoppingCart = shoppingCart.classList.contains('inactive');
    closeMenuEmail = desktop_menu.classList.contains('inactive');
    cerrarCarrito();
    if(!closeShoppingCart){
        shoppingCart.classList.toggle('inactive');   
    }
    desktop_menu.classList.toggle('inactive');    
    
    }

function toggleMobil_menu (){
    closeMobil = menuMobil.classList.contains('inactive');
    closeShoppingCart = shoppingCart.classList.contains('inactive');
    closeMenuEmail = desktop_menu.classList.contains('inactive');
    cerrarCarrito();
    if(!closeShoppingCart){
        shoppingCart.classList.toggle('inactive');
    }
    menuMobil.classList.toggle('inactive');       
    }

function toggleShoppingCart (){ 
    closeMobil = menuMobil.classList.contains('inactive');
    closeShoppingCart = shoppingCart.classList.contains('inactive');
    closeMenuEmail = desktop_menu.classList.contains('inactive');
    cerrarCarrito();
    if(!closeMobil){
        menuMobil.classList.toggle('inactive');
         }
     if(!closeMenuEmail){
            desktop_menu.classList.toggle('inactive');
         }
         shoppingCart.classList.toggle('inactive');
    }

    function openCart(){
        productDetail.classList.remove('inactive');
        shoppingCart.classList.add('inactive');
        menuMobil.classList.add('inactive');
        desktop_menu.classList.add('inactive');
    };

    function cerrarCarrito(){
        productDetail.classList.add('inactive');
    };> 

Todo bien hasta aquí…¿pero como van con su CSS 😅? Mi archivo cuenta con 623 líneas…¿y el suyo?

En mi punto de vista veía que se replicaba el mismo procedimiento asi que lo que hice fue una función que tuviera dos parametros: el primero seria el la vista que me interesa abrir o cerrar y el segundo es un array en donde están todas las vistas. Esto sirve para que se haga la comparación de todas para que solo tenga una coincidencia y a esa coincidencia que la active para que las demás que no coincidan se desactive, pero antes pregunto si está abierto el elemento porque si esta abierto lo que quiero hacer es cerrarlo.
Espero que les sea entendible el código.

El único detalle que tuve fue que en la foto cuando le daba clic me abría y cerraba la misma pestaña así que esa fue la única que sí lo deje con el Open.
La finalidad de esto es que se tenga más vistas o pestañas en un futuro y no tengamos que ir viendo las miles de combinaciones y sea más fácil con esta función. Saludos desde México.

Falto que al darle click a cualquier parte de la pantalla que no sea producto se deseleccione ya sea el detalle de producto o cualquier otro menu, para ello llamamos a la clase:
const contenedorProductos = document.querySelector(’.main-container’);

luego:

contenedorProductos.addEventListener(‘click’,funcionClick);

luego:

function funcionClick(){
detalleCompra.classList.add(‘inactive’);
mobileMenu.classList.add(‘inactive’);
desktopMenu.classList.add(‘inactive’);

}

😃

Para que el product detail mostrara los datos del producto que seleccionaba hice esto:

for (product in productList) {
//Use in para generar un id

  let name = productList[product].name;
  let price = productList[product].price;
  let image = productList[product].image;

  const cardsContainer = document.querySelector('.cards-container')

  const productCard = document.createElement('div');
  productCard.setAttribute("id", product)
  //Aqui le asigno un id a cada item

  productCard.classList.add('product-card')
  productCard.addEventListener("click", openInfoScreen);
  //addEvenListener nos permite usar this, eso nos sirve para despues

Despues en la parte donde desplegamos el product detail:

function openInfoScreen() {
  let id = Number(this.getAttribute("id")); 
  //Aqui this entra en accion, nos sirve para acceder al array y leer los valores del item que queremos mostrar

  let itemImage = document.querySelector(".itemImg");
  let itemName = document.querySelector(".itemName");
  let itemPrice = document.querySelector(".itemPrice");
  let itemDescription = document.querySelector(".itemDescription");
  //Cree variables para cada valor y que se me haga mas facil

  itemImage.setAttribute("src", productList[id].image);
  itemName.innerText = productList[id].name;
  itemPrice.innerText = "$" + productList[id].price;
  itemDescription.innerText = productList[id].description;
 //Aqui ya solo modificamos el HTML para que tenga lo que queremos

Probablemente se pueda optimizar muchisimo mas pero fue lo que se me ocurrio, ojala le sirva a alguien.

Este problema de ocultar y mostrar los elementos interactivos me ha demostrado que es cierto que “no porque la solución de tu colega sea diferente a la tuya, significa que sea mejor o peor”, todos tenemos nuestro estilo, quizás hay soluciones con más líneas que otra, pero todas nos dan el resultado que esperamos (por lo regular).

Pero recuerda que es mejor hacer código que sea mas comprensible al leerlo.

Tenia la idea de que, cada vez que seleccionara un producto diferente se habriera la descripcion para el producto especifico, mire algunas soluciones en los aportes y no logre entender la logica, asi que despues de 2 dias, tantas vueltas y pruebas, muchos console.log buscando seleccionar el evento correcto, esta es mi solucion:

function cardsConstruction() {
    products.forEach((products) => {
        const productCardDiv = document.createElement('div')
        productCardDiv.classList.add('product-card')    
        cardMain.appendChild(productCardDiv)
        productCardDiv.addEventListener('click', details)

        optProducts =  `
        <img src=${products.image} alt=${products.alt} >
        <div class="product-info">
            <div>
                <p>${products.price}</p>
                <p>${products.name}</p>
            </div>
            <figure>
                <img src="./icons/bt_add_to_cart.svg" alt="">
            </figure>
        </div>
        `
        productCardDiv.innerHTML += optProducts

        productCardDiv.addEventListener('click', (e) => {
            if (e.target.src === products.image) {
                const figureClose = document.createElement('figure')
                const imgClose = document.createElement('img')
                imgClose.classList.add('close')
                imgClose.setAttribute('src', './icons/icon_close.png')
                imgClose.setAttribute('alt', 'close')
                imgClose.addEventListener('click', closeDetails)
        
                figureClose.appendChild(imgClose)
                
                dtlProducts = `
                <picture>
                    <img src=${products.image} alt=${products.name} >
                </picture>
                <div class="product-description">
                    <p>${products.price}</p>
                    <p>${products.name}</p>
                    <p>${products.description}</p>
                </div>
                <div class="shopping-detail" >
                    <button><img src="./icons/bt_add_to_cart.svg" alt="cart"> Add to cart</button>
                </div>
               `
               productDetail.innerHTML = dtlProducts
               productDetail.appendChild(figureClose)
            }
        })
    })
        
}```

quise reducir el codigo ya que se repetian muchas cosas en cada una de las funciones, asi que creen una funcion la cual mediante un parametro funcionaria para cada uno de los casos:

function openMenu(clickToevent) {

  if (clickToevent == navEmail) {
    aside.classList.add("inactive");
    productDetailAside.classList.add("inactive");
    desktopMenu.classList.toggle("inactive");

  } else if (clickToevent == burguerMenu) {

    closeProductDetailAside();
    aside.classList.add("inactive");
    mobileMenu.classList.toggle("inactive");

  } else if (clickToevent == shoppingCartMenu) {

    mobileMenu.classList.add("inactive");
    desktopMenu.classList.add("inactive");
    productDetailAside.classList.add("inactive");
    aside.classList.toggle("inactive");
  }
}

Y lo que uego hice fue lamar esa funcion para cada uno de los casos.

function toggleDesktopMenu() {
  openMenu (navEmail);
}

function toggleMobileMenu() {
  openMenu (burguerMenu);
}

function toggleAsideCart() {
  openMenu (shoppingCartMenu);
}

//en este caso no la inclui e la funcion debido a que el evento es llamado en la funcion donde creamos los product-container.
function openProductDetailAside() {
  desktopMenu.classList.add("inactive");
  aside.classList.add("inactive");
  productDetailAside.classList.remove("inactive");
}

function closeProductDetailAside() {
  productDetailAside.classList.add("inactive");
}

y asi logre reducir el codigo a mas de 40 lineas, lo hice de igual forma con las condicionales que el profe Juan uso, pero igual se hizo algo largo el codigo

Yo traté de reducir el código y me quedó de la siguiente forma:

import products from '../data.js';

const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const burgerMenuIcon = document.querySelector('.menu-hamburger');
const mobileMenu = document.querySelector('.mobile-menu');
const menuCartIcon = document.querySelector('.navbar-shoping-cart');
const asideCartList = document.querySelector('.product-detail-shopping-cart');
const cardContainer = document.querySelector('.cards-container');
const asideProductDetail = document.querySelector('.aside-product-detail');
const closeProductDetail = document.querySelector('.product-detail-close');

function toggleItem(showElement, hideElement1, hideElement2, hideElement3) {
  showElement.classList.toggle('inactive');
  hideElement1?.classList.add('inactive');
  hideElement2?.classList.add('inactive');
  hideElement3?.classList.add('inactive');
}
function openAsideProductDetail(
  openElement,
  hideElement1,
  hideElement2,
  hideElement3
) {
  openElement.classList.remove('inactive');
  hideElement1?.classList.add('inactive');
  hideElement2?.classList.add('inactive');
  hideElement3?.classList.add('inactive');
}
function closeAsideProductDetail(closeElement) {
  closeElement.classList.add('inactive');
}

menuEmail.addEventListener('click', () =>
  toggleItem(desktopMenu, asideCartList, mobileMenu, asideProductDetail)
);
burgerMenuIcon.addEventListener('click', () =>
  toggleItem(mobileMenu, asideCartList, desktopMenu, asideProductDetail)
);
menuCartIcon.addEventListener('click', () =>
  toggleItem(asideCartList, desktopMenu, mobileMenu, asideProductDetail)
);
closeProductDetail.addEventListener('click', () => {
  closeAsideProductDetail(asideProductDetail);
});

// index products

function renderPRoducts(arr) {
  for (let product of arr) {
    const productCard = document.createElement('div');
    productCard.classList.add('product-card');

    const productImg = document.createElement('img');
    productImg.setAttribute('src', product.image);
    productImg.setAttribute('alt', product.name);
    productImg.addEventListener('click', () =>
      openAsideProductDetail(
        asideProductDetail,
        desktopMenu,
        asideCartList,
        mobileMenu
      )
    );

    const productInfo = document.createElement('div');
    productInfo.classList.add('product-info');

    const productInfoDiv = document.createElement('div');
    const productPrice = document.createElement('p');
    productPrice.innerText = `$${product.price}`;
    const productName = document.createElement('p');
    productName.innerText = `${product.name}`;

    productInfoDiv.appendChild(productPrice);
    productInfoDiv.appendChild(productName);

    const productInfoFigure = document.createElement('figure');
    const productImgCart = document.createElement('img');
    productImgCart.setAttribute('src', './assets/icons/bt_add_to_cart.svg');
    productImgCart.setAttribute('alt', 'cart-icon');

    productInfoFigure.appendChild(productImgCart);
    productInfo.append(productInfoDiv, productInfoFigure);
    productCard.append(productImg, productInfo);

    cardContainer.append(productCard);
  }
}
renderPRoducts(products);

hay cosas que se pueden mejorar como cuando se selecciona un producto y que en el aside aparezca la info del producto seleccionado, ya que siempre sale el mismo, eso lo pude lograr usando un metodo del curso de programacion basica, forEach en vez del for, tambien icertando el html del aside completo desde java scrip con un inner.html:

function renderProducts(arr) {
  arr.forEach((product) => {
    const productCard = document.createElement('div');
    productCard.classList.add('product-card');
    
    productCard.addEventListener('click',()=>{
            openProductDetailAside(product);
    })

    // product= {name, price, image} -> product.image
    const productImg = document.createElement('img');
    productImg.setAttribute('src', product.image);       
      
    const productInfo = document.createElement('div');
    productInfo.classList.add('product-info');
  
    const productInfoDiv = document.createElement('div');
  
    const productPrice = document.createElement('p');
    productPrice.innerText = '$' + product.price;
    const productName = document.createElement('p');
    productName.innerText = product.name;
  
    productInfoDiv.appendChild(productPrice);
    productInfoDiv.appendChild(productName);
  
    const productInfoFigure = document.createElement('figure');
    const productImgCart = document.createElement('img');
    productImgCart.setAttribute('src', './icons/bt_add_to_cart.svg');
  
    productInfoFigure.appendChild(productImgCart);
  
    productInfo.appendChild(productInfoDiv);
    productInfo.appendChild(productInfoFigure);
  
    productCard.appendChild(productImg);
    productCard.appendChild(productInfo);
  
    cardsContainer.appendChild(productCard);
  })
}
renderProducts(productList);

function selectedProduct(product) {
  const productoSeleccionado = `
  <div class="product-detail-close">
            <img src="./icons/icon_close.png" alt="close">
          </div>
      <img src=${product.image} alt=${product.name}>
      <div class="product-info">
        <p>$${product.price}</p>
        <p>${product.name}</p>
        <p>With its practical position, this ${product.name} 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">
          <img>/   Add to cart
        </button> 
      </div>
    `
    productDetailContainer.innerHTML = productoSeleccionado
    const productDetailCloseIcon = document.querySelector('.product-detail-close')
    productDetailCloseIcon.addEventListener('click', closeProductDetailAside);

}

tuve que hacer muchos cambios ya que se alteraban los estilos y salian errores asi que mi solucion esta un poco extensa tal vez haya una manera mas practica de hacerlo pero no supe como mas, asi quedo la funcion de open aside:

function openProductDetailAside(product) {
  console.log(product)
  desktopMenu.classList.add('inactive');
  shoppingCartContainer.classList.add('inactive');
  selectedProduct(product);
  productDetailContainer.classList.remove('inactive');
}

tambien se puede mejorar con esa misma logica el carrito de ordenes para que solo salgan los productos agregados al carrito, agregando un event listener a este boton en el forEach y guardando en un arreglo los seleccionados.

adjunto una imagen donde se ve el resultado y como con el forEach podemos obtener en la consola los valores del objeto clickeado:

Les comparto una solución más sencilla utilizando una función que añade la clase “inactive” a una lista de elementos.
.

function toggleDesktopMenu() {
  desktopMenu.classList.toggle("inactive");
  addInactive(cartDetail, mobileMenu, productDetail);
}

function toggleMobileMenu() {
  mobileMenu.classList.toggle("inactive");
  addInactive(cartDetail, desktopMenu, productDetail);
}

function toggleAsideCart() {
  cartDetail.classList.toggle("inactive");
  addInactive(mobileMenu, desktopMenu, productDetail);
}

function openAsideProuctDetail() {
  productDetail.classList.remove("inactive");
  addInactive(cartDetail, mobileMenu, desktopMenu);
}

function closeAsideProuctDetail() {
  productDetail.classList.add("inactive");
  addInactive(cartDetail, mobileMenu, desktopMenu);
}

// Esta es la función
function addInactive(...elements) {
  elements.forEach((element) => {
    element.classList.add("inactive");
  });
}

.
Como la función “addInactive” utiliza el spread operator para recibir los elementos y guardarlos en un array “elements”, se puede llamar a la función sin importar la cantidad de elementos a las que tengamos que añadir la clase “inactive”.

Creo que otro issue que podría pasar es que al abrir el menú desktop y después el productDetail, se quedaría abierto y al intentar abrir el menú no se cierra el productDetail

Mi solución a este problema (evitando el posible error que teníamos de que se mantuviera abierto el menú desktop) seria:

function toggleDesktopMenu() {
    const isAsideclose = shoppingCartContainer.classList.contains('inactive');

    if(!isAsideclose) {
        shoppingCartContainer.classList.add('inactive');
    }

    closeProductDetailAside();

    desktopMenu.classList.toggle('inactive');
}

function openProductDetailAside() {
    shoppingCartContainer.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    productDetailContainer.classList.remove('inactive');
}

Yo al product detail lo creé abajo de le función renderProducts, y solo me estaba funcionando el primero

![](

Utilice esta sintexis para ver si me podría dar problemas:

menuEmail.addEventListener("click", () => {
 
});

Lo que aprendí es que efectivamente da problemas al momento de dar mantenimiento al codigo, es mejor tener separdo todo en funciones como hace JuanDc

En la clase se muestra que al hacer click sobre un producto, muestra un el detalle de un producto “generico”, creado previamente con html que no varia, sea cual sea el producto seleccionado, siempre nos va a mostrar los detalles de una bici, que su valor es 35.
Para cambiar esto se me ocurrió hacer un render de los detalles de productos, que simule que por medio de una API obtiene todos los detalles de producto, pero ya con la clase inactive para que no se vean:

function renderProductDetail(arr){
    for(product of arr){
        const containerDetailProduct = document.createElement('div')
        containerDetailProduct.classList.add('inactive', 'container-product')

        const productDetailClose = document.createElement('div')
        productDetailClose.classList.add('product-detail-close')

        const imageClose = document.createElement('img')
        imageClose.setAttribute('src', './icons/icon_close.png')

        const imageProduct = document.createElement('img')
        imageProduct.setAttribute('src', product.image)
        imageProduct.classList.add('img-cont-product-detail')

        const productDetailInfo = document.createElement('div')
        productDetailInfo.classList.add('product-detail-info')


        const productPrice = document.createElement('p')
        productPrice.innerText = '$' + product.price;
        const productName = document.createElement('p')
        productName.innerText = product.name;
        productName.classList.add('name')
        const productDescription = document.createElement('p')
        productDescription.innerText = product.description;
        
        const buttonAddCart = document.createElement('button');
        buttonAddCart.classList.add('primary-button', 'add-to-cart-button')

        const imageAddtoCart = document.createElement('img')
        imageAddtoCart.setAttribute('src', './icons/bt_add_to_cart.svg')

        buttonAddCart.append(imageAddtoCart)

        productDetailInfo.append(productPrice, productName, productDescription, buttonAddCart)

        productDetailClose.append(imageClose)

        containerDetailProduct.append(productDetailClose, imageProduct, productDetailInfo)

        productDetail.append(containerDetailProduct)
    }
}

renderProductDetail(productList);
renderProductList(productList);

Después, con una función, comparo el nombre del producto seleccionado, con el nombre de la lista de producto que simulo traer por un API (para esto recorro todo el arreglo), y le quito la clase “inactive” solo a la que coincida el nombre, en un futuro se podría asignar un id y después verificar que los id sean los mismos.

let productsCard= document.querySelectorAll('.product-card')



productsCard.forEach(producto => {
    producto.addEventListener('click', () => {
        const todosLosProductos = document.querySelectorAll('.container-product')
        todosLosProductos.forEach(producto => {
            producto.classList.add('inactive')
        })

        let name = producto.querySelector('.name').textContent;
        console.log('El nombre del articulo seccionado es: ', name)
       
        let containerProducts = document.querySelectorAll('.container-product')
        containerProducts.forEach(productoDetalle =>{
            let nombreProducto = productoDetalle.querySelector('.container-product .product-detail-info .name').textContent
            if(name === nombreProducto){
                productoDetalle.classList.remove('inactive')
            }
        })
        
    })
})


let btnsDetailProductClose = document.querySelectorAll('.product-detail-close')

btnsDetailProductClose.forEach(btn =>{
    btn.addEventListener('click', function(){
        console.log('click boton close')
        const todosLosProductos = document.querySelectorAll('.container-product')
            todosLosProductos.forEach(producto => {
                producto.classList.add('inactive')
        })
    })
})

Es un aporte capaz a alguien como a mi le molestaba que siempre muestre el detalle del producto genérico de la bici.

Aplicar interacción entre los demás productos de la web (menú desktop, detalles de producto, carrito de compra)

• Mira el tutorial: AQUÍ

Mis apuntes

• Yo también realicé la interacción para cuando quieres abrir un detalle de producto y ya había otro detalle de producto abierto
  Aquí dejo todas las interacciones entre elementos que realicé:
  Mira aquí

• Por otro lado, cuando se tiene diferentes productos en la web, se entiende que cada detalle de producto será de acuerdo al producto solicitado, es por eso que realicé el detalle de producto desde JavaScript, tal como se hizo con la lista de productos.
  En el siguiente tutorial muestro como lo hice: Mira el tutorial

• Una vez elaborado el detalle de producto desde JavaScript, hay que darles interacción para que se abran con el producto correcto. Mira el tutorial aquí

Me encantaaaaa!!!

Para mostrar u ocultar los elementos organice una única función que recibe como parámetro el elemento a mostrar y un array con las clases a ocultar, hasta el momento me funciona perfecto.

function toggleElement(element, checkElement=[]){
    const  element_modify = document.querySelector(element);
    element_modify.classList.toggle('inactive');

    if(checkElement.length > 0){
        for(check of checkElement){
            const  element1 = document.querySelector(check);
            if(!element1.classList.contains('inactive')){
                element1.classList.add('inactive');
            }
        }
    }
}

Para mí fue más sencillo mandar a traer la función que cierra el aside de la información del producto que hacer otra comparación al momento de abrir el carrito.

function toggleCarrito(){
    
    if(!menuMobile.classList.contains('inactive')){

        menuMobile.classList.add('inactive')
        
    }
    productDetailClose();
    shoppingCartContainer.classList.toggle('inactive')
}

Acá les dejo mi aporte. Lo dejo en forma de captura para que se lea mejor.

Considero que de esta forma les podria faciliar mucho mas su js, basicamente no uso ningun condicional, mi funcionalidad se basa en add y remove, de esta manera solo tengo que cerrar todos los elementos y abrirlos sin necesidad de preguntar cosas

const menu = document.querySelector('.desktop-menu');
const navEmail = document.querySelector('.nav-email');
const menuMobile = document.querySelector('.mobile-menu');
const IconHam = document.querySelector('.menu');
const cart = document.querySelector('.shopping-car');
const aside = document.querySelector('.section-container');

const asideDetails =document.querySelector('.aside-container') ;
const detailsClosed = document.querySelector('.closed-details');

const mainContainer = document.querySelector('.main-container');



navEmail.addEventListener('click',block);
IconHam.addEventListener('click',blockMobile);
cart.addEventListener('click',blockCart);
detailsClosed.addEventListener('click',XDetails)
/* defined inactive-stated */

mainContainer.classList.remove('inactive');
// active default


function block()
{
    menu.classList.toggle('inactive');
    aside.classList.add('inactive');
    asideDetails.classList.add('inactive');

}


function blockMobile()
{ 
    menuMobile.classList.toggle('inactive');
     aside.classList.add('inactive');
     asideDetails.classList.add('inactive');

}

function blockCart()
{
    aside.classList.toggle('inactive');
    menuMobile.classList.add('inactive');
    menu.classList.add('inactive');
    asideDetails.classList.add('inactive');


}
function Details()
{
    asideDetails.classList.remove('inactive');
    menu.classList.add('inactive');
    menuMobile.classList.add('inactive');
    aside.classList.add('inactive');
    mainContainer.classList.add('inactive');



    
}
function XDetails()
{
    asideDetails.classList.add('inactive');
    mainContainer.classList.remove('inactive');

    
}
//main-container-products
// arr
const productList =[];
productList.push({
    name:'Bike',
    price:120,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'TV',
    price:100,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'Tablet',
    price:70,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'Bike',
    price:120,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'TV',
    price:100,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'Tablet',
    price:70,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'Bike',
    price:120,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'TV',
    price:100,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'Tablet',
    price:70,
    image:'Product/Bike.jpg',
});
//layout-for-of
function renderProducts(arr)
{
    for(product of arr){
        const cardsContainer=document.querySelector('.cards-container');
        const productCard = document.createElement('div');
        productCard.classList.add('product-card-order');
        const productImg = document.createElement('img');
        productImg.classList.add('images-main');
        productImg.setAttribute('src',product.image);
        productImg.addEventListener('click', Details);

    
        const informationDiv =document.createElement('div');
        informationDiv.classList.add('buy-information');
        const priceParagraph=document.createElement('p');
        const nameParagraph=document.createElement('p');
    priceParagraph.innerText= '$'+ product.price;
        nameParagraph.innerText = product.name;
        informationDiv.append(priceParagraph,nameParagraph);
    
        const figure =document.createElement('figure');
        figure.classList.add('buy-Logo');
        const LogoImage =document.createElement('img');
        LogoImage.setAttribute('src', './Icons/Platzi_YardSale_Icons/bt_add_to_cart.svg' );
        figure.append(LogoImage);
        productCard.append(productImg,informationDiv,figure);
        cardsContainer.appendChild(productCard);
    
        
    
    
    
    }    

}
renderProducts(productList);

La solucion mas limpia y simple que encontre es esta, no estoy seguro que sea la mejor, juzguen ustedes:

<function showDesktopMenu(){
    shoppingCartContainer.classList.add("inactive");
    productDetailContainer.classList.add("inactive");
    desktopMenu.classList.remove("inactive");
}
function showMobileMenu(){
    shoppingCartContainer.classList.add("inactive");
    productDetailContainer.classList.add("inactive");
    mobileMenu.classList.remove("inactive");
}
function showShoppingCartContainer(){
    mobileMenu.classList.add("inactive");
    productDetailContainer.classList.add("inactive");
	shoppingCartContainer.classList.remove("inactive");
}> 

En vez de alentar al estudiante, lo que hace es dar miedo por lo que viene… Malo malo eso.

Solo falto la combinación del menú de deskto pero aplicando la misma lógica que ya traíamos erá súper sencillo ponerlas a funcionar todas.

Yo me basé en los condicionales hechos anteriormente.

        const productImg=document.createElement('img');
        productImg.setAttribute('src',product.image);
        productImg.addEventListener('click',()=>{
            if(!mobileMenu.classList.contains('inactive') ||!desktopMenu.classList.contains('inactive') || !aside.classList.contains('inactive')){
                mobileMenu.classList.add('inactive');
                desktopMenu.classList.add('inactive');
                aside.classList.add('inactive');
                
            }
            productDetailContainer.classList.toggle('inactive')
        });

Otra que genera problemas,es al momento de darle click al correo y esta el aside abierto.

Solución para esto

navEmail.addEventListener('click',()=>{
    if(!aside.classList.contains('inactive')|| !productDetailContainer.classList.contains('inactive')){
        aside.classList.add('inactive');
        productDetailContainer.classList.add('inactive');
        
    }
    desktopMenu.classList.toggle('inactive');  
});```

Les dejo mi única función de toggle que maneja la apertura y cierre de todas las sub secciones del marketplace tal como la vengo llevando hasta ahora:

function toggleMenu(event) {
    /* console.log(event); */
    if (event.srcElement.className === 'menu') {
        const isshoppingCartContainerClose = shoppingCartContainer.classList.contains('inactive');
        const isProductDetailContainerClosed = productDetailContainer.classList.contains('inactive');

        if (!isshoppingCartContainerClose) {
            shoppingCartContainer.classList.add('inactive');
        } else if (!isProductDetailContainerClosed) {
            productDetailContainer.classList.add('inactive');
        }

        mobileMenu.classList.toggle('inactive');
    } else if (event.srcElement.className === 'navbar-email') {
        const isshoppingCartContainerClose = shoppingCartContainer.classList.contains('inactive');
        const isProductDetailContainerClosed = productDetailContainer.classList.contains('inactive');

        if (!isshoppingCartContainerClose) {
            shoppingCartContainer.classList.add('inactive');
        } else if (!isProductDetailContainerClosed) {
            productDetailContainer.classList.add('inactive');
        }

        desktopMenu.classList.toggle('inactive');

    } else if (event.srcElement.className === 'navbar-shopping-cart') {
        const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); /* True si el mobileMenu está inactive */
        const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');
        const isProductDetailContainerClosed = productDetailContainer.classList.contains('inactive');


        if (!isMobileMenuClosed) {
            mobileMenu.classList.add('inactive');
        } else if (!isDesktopMenuClosed) {
            desktopMenu.classList.add('inactive');
        } else if (!isProductDetailContainerClosed) {
            productDetailContainer.classList.add('inactive');
        }
        
        /* Si el menú mobile o el menú desktop no están cerrados entonces los cierro. */

        shoppingCartContainer.classList.toggle('inactive'); /* Y luego hago toggle de inactive para el aside de product detail */
    } else if (event.srcElement.className === 'product-img') {
        const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); 
        const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');
        const isshoppingCartContainerClose = shoppingCartContainer.classList.contains('inactive');

        if (!isMobileMenuClosed) {
            mobileMenu.classList.add('inactive');
        } 
        if (!isDesktopMenuClosed) {
            desktopMenu.classList.add('inactive');
        } 
        if (!isshoppingCartContainerClose) {
            shoppingCartContainer.classList.add('inactive');
        }

        // console.log(event);  Entra bien al seleccionar la imagen
        productDetailContainer.classList.remove('inactive');
    } else if (event.srcElement.className === 'product-detail-close') {
        // console.log(event);
        productDetailContainer.classList.add('inactive');
    }
}

El productDetail que estamos mostrando con esta solución está hardcodeado desde HTML. Deberiamos abrir un product detail por cada uno de nuestros productos publicados. En el caso del ejemplo del profe pareciera que no es tal ya que tiene 3 bicis iguales. Pero ¿Y si fuesen distintos? … Voy a pensar la solución al problema y vuelvo.

De esta manera lo resolví yo para abrir y cerrar los elementos según fuera el caso, lo único que agregué fue una variable booleano. Quisiera explicar a detalle pero el código lo explica todo y mucho mejor 😄

Les dejo el código que me sirvió sin darle tantas vueltas, hice una funcion con toggle como las demas, y luego lo unico que le cambié fue el toggle por el remove, luego cree la funcion para cerrarlo y ya, pero la demas lógica la dejé igual que con las otras ventanas,

function openProductDetails() {
  // This function closes all the other menus, so nothing is behind.
  const mobileMenuClosed = mobileMenu.classList.contains("inactive");
  const desktopMenuClosed = desktopMenu.classList.contains("inactive");
  const shoppingCartClosed = shoppingCart.classList.contains("inactive");

  if (!mobileMenuClosed) {
    mobileMenu.classList.toggle("inactive");
  } else if (!desktopMenuClosed) {
    desktopMenu.classList.toggle("inactive");
  } else if (!shoppingCartClosed) {
    shoppingCart.classList.toggle("inactive");
  }

  productDetails.classList.remove("inactive");
}

function closeProductDetails() {
  const productDetailsClosed = productDetails.classList.contains("inactive");

  if (!productDetailsClosed) {
    productDetails.classList.add("inactive");
  }
}

Para evitar usar muchos condicionales, yo usé este código:

• Cree funciones para cada menú

function closeAside(){
    productDetail.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    
}

function showDesktopMenu() {
    shoppingCartResume.classList.add('inactive');
    desktopMenu.classList.toggle('inactive');
    productDetail.classList.add('inactive');
}

function showMobileMenu() {
    shoppingCartResume.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    mobileMenu.classList.toggle('inactive');
    productDetail.classList.add('inactive');
}

function showShoppingCart() {
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    productDetail.classList.add('inactive');
    shoppingCartResume.classList.toggle('inactive');
}

• Luego mandé llamar a estas funciones

navEmail.addEventListener('click', showDesktopMenu);
menu.addEventListener('click', showMobileMenu);
shoppingCartIcon.addEventListener('click', showShoppingCart);
asideClose.addEventListener('click', closeAside);
renderProducts(productList);

👀 Esta fue la solución a la que llegué después de varias iteraciones. Hice una fución para cerrar todos los demás elementos antes de abrir uno nuevo, y la llamé como un callback en funciones para abrir y hacer toggle.

//functions
function closeBeforeOpen(menuB, menuC, menuD) {
  const isMenuBOpen = !menuB.classList.contains('inactive');
  const isMenuCOpen = !menuC.classList.contains('inactive');
  const isMenuDOpen = !menuD.classList.contains('inactive');

  if (isMenuBOpen || isMenuCOpen || isMenuDOpen) {
    menuB.classList.add('inactive');
    menuC.classList.add('inactive');
    menuD.classList.add('inactive');
  }
}

function toggleElement(menuA, menuB, menuC, menuD) {
  closeBeforeOpen(menuB, menuC, menuD);
  menuA.classList.toggle('inactive');
}

function openElement(menuA, menuB, menuC, menuD) {
  closeBeforeOpen(menuB, menuC, menuD);
  menuA.classList.remove('inactive');
}

function closeElement(element) {
  element.classList.add('inactive');
}

🤖 Para referirme a la función closeBeforeOpen, decidí utilizar el condicional if junto con un operador lógico **or ( ||) ** en lugar de simplemente ejecutar el código cada vez que se mande a llamar. Esta decisión fue algo arbitraria, pero me prece que hace mas legible y comprensible el código, además evita que se ejecute en el 100% de los casos (cuando todo está cerrado de antemano).

📖 Me pareció que sería lo mas práctico, mejorando (a mi parecer) la legibilidad y reduciendo la necesidad de repetir código. Esto es posible gracias al uso de arrow function para envolver los llamados en el event listener.

//event listeners
userIcon.addEventListener('click', () => toggleElement(
  desktopMenu, mobileMenu, shoppingCartContainer, productDetailBar
));

burgerIcon.addEventListener('click', () => toggleElement(
  mobileMenu, desktopMenu, shoppingCartContainer, productDetailBar
));

cartIcon.addEventListener('click', () => toggleElement(
  shoppingCartContainer, desktopMenu, mobileMenu, productDetailBar
));

productDetailCloseIcon.addEventListener('click', () => closeElement(productDetailBar));

//así va el event listener dentro del ciclo for
  productCard.addEventListener('click', () => openElement(
    productDetailBar, desktopMenu, mobileMenu, shoppingCartContainer
  ));
//

🤔 ¿Qué les parece? Sería de mi agrado conocer sus opiniones al respecto.

faltaba corregir la combinacion de menuEmail de esta manera lo corregi

<const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const menuHamIcon = document.querySelector('.menu');
const menuShoppingCartIcon = document.querySelector('.navbar-shopping-cart');
const producDetailCloseIcon=document.querySelector('.product-detail-close');
const mobileMenu = document.querySelector('.mobile-menu');
const shoppingCartContainer = document.querySelector('#shoppingCartContainer');
const producDetailContainer = document.querySelector('#productDetail');
const cardContainer = document.querySelector('.cards-container');
menuEmail.addEventListener('click', () => {
    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
    const isProductDetailClosed = producDetailContainer.classList.contains('inactive'); 
    if(!isProductDetailClosed){
        producDetailContainer.classList.add('inactive');
    }
    if (!isAsideClosed) {
        shoppingCartContainer.classList.add('inactive')
    }
    desktopMenu.classList.toggle('inactive');
});
menuHamIcon.addEventListener('click', () => {
    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
    const isProductDetailClosed = producDetailContainer.classList.contains('inactive'); 
    if(!isProductDetailClosed){
        producDetailContainer.classList.add('inactive');
    }
    if (!isAsideClosed) {
        shoppingCartContainer.classList.add('inactive')
    }
    mobileMenu.classList.toggle('inactive');
});
menuShoppingCartIcon.addEventListener('click', () => {
    const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
    const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');
    const isProductDetailClosed = producDetailContainer.classList.contains('inactive');
    if (!isMobileMenuClosed) {
        mobileMenu.classList.add('inactive');
    } 
    if(!isProductDetailClosed){
        producDetailContainer.classList.add('inactive');
    }
    if (!isDesktopMenuClosed) {
        desktopMenu.classList.add('inactive');
    }
    shoppingCartContainer.classList.toggle('inactive');
});
producDetailCloseIcon.addEventListener('click', () => {
    producDetailContainer.classList.add('inactive')
});
const productList = [];
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://i.pinimg.com/736x/5d/16/cd/5d16cd4b1568c1628689360f306ecb62.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://i.pinimg.com/736x/bf/db/08/bfdb0852163ac36468dbe39b00601e34.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://wallpaperaccess.com/full/8054300.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://stockse.com.br/wp-content/uploads/2022/03/picrew-monkey.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://static.techspot.com/images2/news/bigimage/2021/09/2021-09-10-image-18.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://i.pinimg.com/736x/5d/16/cd/5d16cd4b1568c1628689360f306ecb62.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://i.pinimg.com/736x/bf/db/08/bfdb0852163ac36468dbe39b00601e34.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://wallpaperaccess.com/full/8054300.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://stockse.com.br/wp-content/uploads/2022/03/picrew-monkey.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://static.techspot.com/images2/news/bigimage/2021/09/2021-09-10-image-18.jpg'
});
function renderProducts(arr) {
    for (product of arr) {
        const productCard = document.createElement('div');
        productCard.classList.add('product-card');

        const productImg = document.createElement('img');
        productImg.setAttribute('src', product.image);
        productImg.addEventListener('click',() =>{
        desktopMenu.classList.add('inactive');
        shoppingCartContainer.classList.add('inactive');
        producDetailContainer.classList.remove('inactive');
        });
        
        const productInfo = document.createElement('div');
        productInfo.classList.add('product-info');

        const productInfoDiv = document.createElement('div');
        const productPrice = document.createElement('p');
        productPrice.innerText = '$' + product.price;
        const productName = document.createElement('p');
        productName.innerText = product.name;

        productInfoDiv.appendChild(productPrice);
        productInfoDiv.appendChild(productName);

        const productInfoFigure = document.createElement('figure');
        const productImgCart = document.createElement('img');
        productImgCart.setAttribute('src', "./iconos/Platzi_YardSale_Icons/bt_add_to_cart.svg")

        productInfoFigure.appendChild(productImgCart);

        productInfo.appendChild(productInfoDiv);
        productInfo.appendChild(productInfoFigure);

        productCard.appendChild(productImg);
        productCard.appendChild(productInfo);

        cardContainer.appendChild(productCard);
    }
}
renderProducts(productList);> 

En mi caso debido a que el cerrar las otras ventanas era repetitivo para cada elemento decidí crear unas funciones y así solo llamarlas en cada toggle, les dejo mi código en caso de que les sirva

const menuEmail = document.querySelector('.navbar-email')
const desktopMenu = document.querySelector('.desktop-menu')
const menuHamIcon = document.querySelector('.menu')
const mobileMenu = document.querySelector('.mobile-menu')
const menuCarritoIcon = document.querySelector('.navbar-shopping-cart')
const cartMenu = document.querySelector('.product-detail')
const cardsContainer = document.querySelector('.cards-container')
const productDescriptionContainer = document.querySelector('.product-description')
const closeDescriptionIcon = document.querySelector('.product-description-close')


menuEmail.addEventListener('click', toggleDesktopMenu);
menuHamIcon.addEventListener('click', toggleMobileMenu);
menuCarritoIcon.addEventListener('click', toggleCartMenu);
closeDescriptionIcon.addEventListener('click', closeProductDescription);

function closeCart () {
    const isCartMenuClosed = cartMenu.classList.contains('inactive')

    if (!isCartMenuClosed) {
        cartMenu.classList.add('inactive')
    }
}

function closeEmailMenu () {
    const isEmailMenuClosed = desktopMenu.classList.contains('inactive')
    
    if (!isEmailMenuClosed) {
        desktopMenu.classList.add('inactive')
    }
}

function closeMenuMobile () {
    const isMobileMenuClosed = mobileMenu.classList.contains('inactive')

    if (!isMobileMenuClosed) {
        mobileMenu.classList.add('inactive')
    }
}

function toggleDesktopMenu () {
    closeCart();
    closeProductDescription();

    desktopMenu.classList.toggle('inactive');
}

function toggleMobileMenu () {
    closeCart();
    closeProductDescription();

    mobileMenu.classList.toggle('inactive');
}

function toggleCartMenu () {
    closeMenuMobile();
    closeEmailMenu();
    closeProductDescription();

    cartMenu.classList.toggle('inactive');
}

function openProductDescription () {
    productDescriptionContainer.classList.remove('inactive');
    closeCart();
    closeEmailMenu();
    closeMenuMobile();
}

function closeProductDescription () {
    productDescriptionContainer.classList.add('inactive')
}

const productList = [];
    productList.push ({
        name: 'Bike',
        price: 120,
        image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
    })
    productList.push ({
        name: 'Skate',
        price: 80,
        image: 'https://images.pexels.com/photos/5069290/pexels-photo-5069290.jpeg?cs=srgb&dl=pexels-anna-shvets-5069290.jpg&fm=jpg&_gl=1*12r1825*_ga*NjY3MjIwNDUwLjE2NjUxMDU3MDU.*_ga_8JE65Q40S6*MTY2NzY2OTc2MS4xMC4xLjE2Njc2Njk3ODEuMC4wLjA.'
    })
    productList.push ({
        name: 'Motocross',
        price: 590,
        image: 'https://images.pexels.com/photos/160882/pexels-photo-160882.jpeg?cs=srgb&dl=pexels-daniel-160882.jpg&fm=jpg&_gl=1*on63cz*_ga*NjY3MjIwNDUwLjE2NjUxMDU3MDU.*_ga_8JE65Q40S6*MTY2NzY2OTc2MS4xMC4xLjE2Njc2Njk4NDkuMC4wLjA.'
    })

function renderProducts (arr) {
    for (product of arr) {
        const productCard = document.createElement ('div');
        productCard.classList.add('product-card');
    
        const productImg = document.createElement ('img');
        productImg.setAttribute('src', product.image);
        productImg.addEventListener('click', openProductDescription);
    
        const productInfo = document.createElement ('div');
        productInfo.classList.add('product-info');
    
        const productInfoDiv = document.createElement ('div');
    
        const productPriece = document.createElement('p');
        productPriece.innerText = '$' + product.price;
    
        const productName = document.createElement('p');
        productName.innerText = product.name;
    
        productInfoDiv.appendChild(productPriece);
        productInfoDiv.appendChild(productName);
    
        const productInfoFigure = document.createElement ('figure');
        const productImgCart = document.createElement ('img');
        productImgCart.setAttribute('src', './icons/bt_add_to_cart.svg');
    
        productInfoFigure.appendChild(productImgCart);
    
        productInfo.appendChild(productInfoDiv);
        productInfo.appendChild(productInfoFigure);
    
        productCard.appendChild(productImg);
        productCard.appendChild(productInfo);
    
        cardsContainer.appendChild(productCard);
    }
}

renderProducts(productList);

¡Está padrísimo lo mucho que se emociona JuanDC cuando todo funciona! Esto me dice que él mismo probó el código, además que contagia su entusiasmo a los que estamos tomando el curso. (O por lo menos yo lo siento así)

es mejor superponer porque si ocupas la información del producto al abrir el menu la básica quito lo que estorba y lo dejo funcional pero se rompe la lógica y la armonía de donde estabas

Solución con toggle

Llegué a esta solución porque me daba pereza pensar en que si seguimos agregando menus el código para cerrar las ventanas sería interminable. La solución es una función que recibe como parámetro un elemento de una colección de menus. Y haciendo las comparaciones correspondientes cierra todos los menus que no hayas presionado, pero si presionas un menu que ya está activo (visible) lo cerrará. Aquí mi código:

const menuEmail = document.querySelector(".navbar-email");
const desktopMenu = document.querySelector(".desktop-menu");
const burgerMenu = document.querySelector("img.menu");
const shoppingCartButton = document.querySelector(".navbar-shopping-cart");
const shoppingCartMenu = document.querySelector(".product-detail-cart");
const productDetailMenu = document.querySelector(".product-detail");
const productDetailCloseButton = document.querySelector(
  ".product-detail-close"
);
const mobileMenu = document.querySelector(".mobile-menu");
const cardsContainer = document.querySelector(".cards-container");

const menus = [desktopMenu, shoppingCartMenu, mobileMenu, productDetailMenu];

menuEmail.addEventListener("click", toggleDesktopMenu);
burgerMenu.addEventListener("click", toggleMobileMenu);
shoppingCartButton.addEventListener("click", toggleShoppingCartMenu);
productDetailCloseButton.addEventListener("click", closeProductDetailMenu);

function toggleDesktopMenu() {
  openCloseMenu(desktopMenu);
}

function toggleMobileMenu() {
  openCloseMenu(mobileMenu);
}

function toggleShoppingCartMenu() {
  openCloseMenu(shoppingCartMenu);
}

function toggleProductDetailMenu() {
  openCloseMenu(productDetailMenu);
}

function openCloseMenu(menuToInteract) {
  // Si el menú que intentamos abrir ya está abierto, entonces lo que queremos es cerrarlo
  if (!menuToInteract.classList.contains("inactive")) {
    menuToInteract.classList.add("inactive");
  }
  // Si intentamos abrir otro menu que no sea el que ya esta abierto entonces seguimos la siguiente lógica: cerrar los demás menus
  // y abrir el menú de interés.
  else {
    // Recorremos el arreglo de menus y filtramos el menú de interés que presionamos para removerle la clase inactive, y a los demás
    // agregarle la clase inactive
    for (const menuItem of menus) {
      if (!menuItem.classList.contains(menuToInteract.classList[0])) {
        menuItem.classList.add("inactive");
      } else {
        menuItem.classList.remove("inactive");
      }
    }
  }
}

// function openProductDetailMenu() {
//   productDetailMenu.classList.remove("inactive");
// }

function closeProductDetailMenu() {
  productDetailMenu.classList.add("inactive");
}

Y continuación les dejo el código de la función renderProducts para no hacer muy largo este show:

function renderProducts(arr) {
  for (product of arr) {
    const productCard = document.createElement("div");
    productCard.classList.add("product-card");
    // productCard.addEventListener("click", toggleProductDetailMenu);

    // product= {name, price, image} -> product.image
    const productImg = document.createElement("img");
    productImg.setAttribute("src", product.image);
    productImg.addEventListener("click", toggleProductDetailMenu);

    const productOverview = document.createElement("div");
    productOverview.classList.add("product-overview");

    const productOverviewDiv = document.createElement("div");

    const productPrice = document.createElement("p");
    productPrice.innerText = "$" + product.price;
    const productName = document.createElement("p");
    productName.innerText = product.name;

    productOverviewDiv.appendChild(productPrice);
    productOverviewDiv.appendChild(productName);

    const productOverviewFigure = document.createElement("figure");
    const productImgCart = document.createElement("img");
    productImgCart.setAttribute("src", "./icons/bt_add_to_cart.svg");

    productOverviewFigure.appendChild(productImgCart);

    productOverview.append(productOverviewDiv, productOverviewFigure);

    productCard.append(productImg, productOverview);

    cardsContainer.appendChild(productCard);
  }
}

renderProducts(productList);

Así lo hice y me funcionó bien:

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 productDetailContainer = document.querySelector('#productDetail');

const cardsContainer = document.querySelector('.cards-container');    // Requerido para poder agregar un nodo al contenedor principal

menuEmail.addEventListener('click', toggleDesktopMenu);
menuHamIcon.addEventListener('click', toggleMobileMenu);
menuCarritoIcon.addEventListener('click', toggleCarritoAside);
productDetailCloseIcon.addEventListener('click', closeProductDetailAside);

function toggleDesktopMenu() {
  desktopMenu.classList.toggle('inactive');   // Activa sólo el menú Desktop
  mobileMenu.classList.add('inactive');
  shoppingCartContainer.classList.add('inactive');
  productDetailContainer.classList.add('inactive');
}

function toggleMobileMenu() {
  desktopMenu.classList.add('inactive');
  mobileMenu.classList.toggle('inactive');    // Activa sólo el menú Mobile
  shoppingCartContainer.classList.add('inactive');
  productDetailContainer.classList.add('inactive');
}

function toggleCarritoAside() {
  desktopMenu.classList.add('inactive');
  mobileMenu.classList.add('inactive');
  shoppingCartContainer.classList.toggle('inactive');   // Activa sólo el menú Carrito
  productDetailContainer.classList.add('inactive');
}

function openProductDetailAside() {
  shoppingCartContainer.classList.add('inactive');
  desktopMenu.classList.add('inactive');
  mobileMenu.classList.add('inactive');
  productDetailContainer.classList.remove('inactive');    // Activa sólo el menú Detalle
}

function closeProductDetailAside() {
  productDetailContainer.classList.add('inactive');
}

Creo que seria lo mas logico cerrar todos y solo abrir el que se utilice

menuHamburguer.addEventListener('click',()=>{
  detailProduct.classList.remove('product-detailMostrar');
  menucart.classList.remove('my-orderActive');
  menuDesktop.classList.remove('desktop-menuActive');
  mobileMenu.classList.toggle('activeMenu');
})

shoppingCart.addEventListener('click',()=>{
  detailProduct.classList.remove('product-detailMostrar');
  menucart.classList.toggle('my-orderActive');
  menuDesktop.classList.remove('desktop-menuActive');
  mobileMenu.classList.remove('activeMenu')
})

email.addEventListener('click',()=>{
  detailProduct.classList.remove('product-detailMostrar');
  menucart.classList.remove('my-orderActive');
  menuDesktop.classList.toggle('desktop-menuActive');
  mobileMenu.classList.remove('activeMenu');
})

function mostrar(){
  detailProduct.classList.add('product-detailMostrar');
  menucart.classList.remove('my-orderActive');
  menuDesktop.classList.remove('desktop-menuActive');
  mobileMenu.classList.remove('activeMenu');
}

cerrarDetailProduct.addEventListener('click',()=>{
  detailProduct.classList.remove('product-detailMostrar');
})

Les comparto el código que me ha funcionado a mi hasta el momento. Espero a alguien mas le funcione la lógica de poner y quitar la class inactive.

menHamIcon.addEventListener("click", aparecerMenuMobil);
menuEmail.addEventListener("click", aparecerMenu);
menuCarritoIcon.addEventListener("click", aparecerMenuCarrito);
closeProductDetail.addEventListener("click", closeDetailProd);

function aparecerMenu() {
  desktopMenu.classList.toggle("inactive");
  carritoCompras.classList.add("inactive");
  productDetail.classList.add("inactive");
}

function aparecerMenuMobil() {
  mobileMenu.classList.toggle("inactive");
  carritoCompras.classList.add("inactive");
  productDetail.classList.add("inactive");
}

function aparecerMenuCarrito() {
  carritoCompras.classList.toggle("inactive");
  mobileMenu.classList.add("inactive");
  desktopMenu.classList.add("inactive");
  productDetail.classList.add("inactive");
}

function mostrarDetalleProducto(){
  productDetail.classList.remove("inactive");
  mobileMenu.classList.add("inactive");
  desktopMenu.classList.add("inactive");
}

function closeDetailProd(){
  productDetail.classList.add("inactive");

mi solucion siguiendo con dialog fue creando una funcion.

function dialogOpen(dialog) {
    if(dialog.open) {
        console.log('open')
        mobileMenu.classList.add('inactive');
        openCartMenu.classList.add('inactive');
        desktopMenu.classList.add('inactive');
    }
}

/*productslist.....*/
        image.onclick = () => { 
            dialog.showModal();  
            dialogOpen(dialog)
        };

tengo pendiente ver los nuevos cursos de front-end y si puedo a 2x

Hola, hasta el momento pude resolverlo con .toggle y .add sin condicionales. Creo haber probado todas las posibilidades y funciona 🙂

function toggleDesktopMenu () {
    shoppingCartContainer.classList.add('inactive');
    productDetailAside.classList.add('inactive');
    desktopMenu.classList.toggle('inactive');
}

function toggleMobileMenu () {
    shoppingCartContainer.classList.add('inactive')
    productDetailAside.classList.add('inactive');
    mobileMenu.classList.toggle('inactive')
}

function toggleMyOrderAside () {
    mobileMenu.classList.add('inactive')
    productDetailAside.classList.add('inactive');
    shoppingCartContainer.classList.toggle('inactive')
}

function openProductDetailAside (){
    productDetailAside.classList.remove('inactive')
    shoppingCartContainer.classList.add('inactive')
    desktopMenu.classList.add('inactive');
}

function closeProductDetailAside (){
    productDetailAside.classList.add('inactive')
}

Un problema que vi y que quise solucionar es cuando estamos en la versión de Mobile, hacemos scroll, y luego seleccionamos algún producto (dar click en su imagen), se ve de esta manera:

Para solucionar esto, es sencillo, simplemente en el CSS, debemos modificar el contenedor perteneciente al AsideCart que es el que aparece cuando se activa el evento en click

.product-detail-secondary {
    height: calc(100vh - var(--navHeight));
    width: 100%;
    position: fixed;
    top: 60px;
  }

Agregamos un position: fixed, que lo que nos permite es que el elemento (aside) aparezca “pegado” en la pantalla sin que se desplaze, independiente de los demás elementos, y un top:60px simplemente para que no colisione con la barra de navegacion.

De esta manera, en Mobile, si hacemos scroll ahora y seleccionamos algún elemento, ya no saldrá en la posición donde inician los productos, sino en toda nuestra pantalla

Al realizar condiciones se pueden concatenar, de esa manera se comprime un poco las condiciones por Ejemplo

function toggleCaraside() {
  const isDesktopmenu = desktopMenu.classList.contains('inactive');
  const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
  const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
  if (!isMobileMenuClosed || !isDesktopmenu || !isProductDetailClosed) {
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    productDetailContainer.classList.add('inactive');
  }
  shoppingCartContainer.classList.toggle('inactive');
}

Mi solución fue integrar un condicional en cada evento, preguntando si esta contenia la clase “inactive” (esta abierta) y añadir la clase a los componentes que deberian estar cerrados.

Todo con el fin de tener mayor claridad dentro del codigo 👾

const productList = [];

function toggleShow(btn, elementToToggle, leaveEvent) {
btn.addEventListener(“click”, () => {
elementToToggle.classList.toggle(“hidden”);
});

if (leaveEvent) {
elementToToggle.addEventListener(“mouseleave”, (e) => {
elementToToggle.classList.add(“hidden”);
});
}
}

function renderProduct(array) {
let index = 0;
for (product of array) {
productNode = <div --data-product-id="${index++}" class="product-card"> <img src=${product.img} alt=""> <div class="product-info"> <div> <p>$${product.price}</p> <p>${product.name}</p> </div> <figure> <img src="./icons/bt_add_to_cart.svg" alt=""> </figure> </div> </div>;
cardsContainer.innerHTML += productNode;
}
}

function renderProductDetails(product) {
let productDetailsInfo = document.querySelector(".product_details-info");
productDetailsInfo.replaceChildren();

let pPrice = document.createElement(“p”);
pPrice.append($${product.price});
let pName = document.createElement(“p”);
pName.append(${product.name});
let pDescrip = document.createElement(“p”);
pDescrip.append(${product.desc});

productDetailsInfo.append(pPrice, pName, pDescrip);
}

function openProduct() {
let productId = document.querySelectorAll("[–data-product-id]");

for (let i = 0; i < productId.length; i++) {
productId[i].addEventListener(“click”, () => {
renderProductDetails(productList[i]);
});
toggleShow(productId[i], productDetail,true);
}
}

Este proyecto lo realicé con React en lugar de javascript puro pero es un buen ejercicio hacerlo con javascript puro aunque hubiera preferido separar el código en es-modulos

Falta el desktopMenu, que se queda abierto debajo al hacer click en otro, y lo he resuelto añadiendo la función closeProductDetailAside en la función toggleDesktopMenu:

function toggleDesktopMenu() {
const isAsideClosed = shoppingCartContainer.classList.contains('inactive');

if (!isAsideClosed) {
    shoppingCartContainer.classList.add('inactive');
}

closeProductDetailAside();

desktopMenu.classList.toggle('inactive');
}

y en la función toggleCarritoAside añadí una nueva variable llamada isDesktopMenuClosed con un condicional if:

function toggleCarritoAside() {
const isMobileMenuClosed = mobileMenu.classList.contains('inactive');

if (!isMobileMenuClosed) {
    mobileMenu.classList.add('inactive');
}

const isProductDetailClosed = productDetailContainer.classList.contains('inactive');

if (!isProductDetailClosed) {
    productDetailContainer.classList.add('inactive');
}

const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');

if (!isDesktopMenuClosed) {
    desktopMenu.classList.add('inactive');
}

shoppingCartContainer.classList.toggle('inactive');
}

function toggleDesktopMenu() {
    mobileMenu.classList.add('inactive');
    shoppingCartContainer.classList.add('inactive');
    productDetailContainer.classList.add('inactive')    

    desktopMenu.classList.toggle('inactive');
}

function toggleMobileMenu() {
    desktopMenu.classList.add('inactive');
    shoppingCartContainer.classList.add('inactive');
    productDetailContainer.classList.add('inactive')

    mobileMenu.classList.toggle('inactive');
}

function toggleCartAside() {
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    productDetailContainer.classList.add('inactive');

    shoppingCartContainer.classList.toggle('inactive');
}

function openProductDetailAside() {
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    shoppingCartContainer.classList.add('inactive');

    productDetailContainer.classList.remove('inactive')
}

function closeProductDetailAside() {
    productDetailContainer.classList.add('inactive')
}

Yo lo hice con puras condiciones lógicas, la unica manera de que no se me active es que ninguna de las condiciones sean verdaderas.

Dejo mi aporte

//Productos
//Carga

const productList = [];

productList.push({
    name:'Bike',
    price: 10000,
    image:'https://pedalia.cc/wp-content/uploads/2016/07/FeatureBiciMontana-770x513.jpg',
    id:0,
});

productList.push({
    name:'Computadora',
    price: 200000,
    image:'https://drawfolio.s3.amazonaws.com/public/system/pictures/images/000/032/729/original/compu.jpg?1430413991',
    id:1,
});

productList.push({
    name:'Celular',
    price: 80600,
    image:'https://marcimex.vteximg.com.br/arquivos/ids/188520-320-320/34663---CELULAR-I_APPLE_IPHONE-13-PRO-128GB_GRA.jpg?v=637902369438870000',
    id:2,
});

productList.push({
    name:'Bike 3',
    price: 10000,
    image:'https://pedalia.cc/wp-content/uploads/2016/07/FeatureBiciMontana-770x513.jpg',
    id:3,
});

productList.push({
    name:'Computadora 4',
    price: 200000,
    image:'https://drawfolio.s3.amazonaws.com/public/system/pictures/images/000/032/729/original/compu.jpg?1430413991',
    id:4,
});

productList.push({
    name:'Celular 5',
    price: 80600,
    image:'https://marcimex.vteximg.com.br/arquivos/ids/188520-320-320/34663---CELULAR-I_APPLE_IPHONE-13-PRO-128GB_GRA.jpg?v=637902369438870000',
    id:5,
});

//Creamos las tarjetas con JS

function createCards (arr) {

    for (product of arr){

        const productDiv = document.createElement('div');
        productDiv.classList.add('product-card');
        
        productDiv.addEventListener('click', openDetails);
    
        const productImg = document.createElement('img');
        productImg.setAttribute('src', product.image);

        const containerDescription = document.createElement('div');
        containerDescription.classList.add('container-desciption');

        const containerDescriptionDiv = document.createElement('div');
        containerDescriptionDiv.classList.add('product-card_description');


        console.log(product.id);

       
        //accion
        
        const productPrice = document.createElement('p');
        productPrice.classList.add('product-price');
        productPrice.innerText= '$' + product.price;

        const productName = document.createElement('p');
        productName.classList.add('product-description');
        productName.innerText = product.name;

        containerDescriptionDiv.appendChild(productPrice);
        containerDescriptionDiv.appendChild(productName);
        

        const productFigure = document.createElement('figure');
        
        const productImgIconCart = document.createElement('img');
        productImgIconCart.classList.add('iconCard');
        productImgIconCart.setAttribute('src', "../iconos-img/carrito-compras.png");

        productFigure.appendChild(productImgIconCart);

        containerDescription.appendChild(containerDescriptionDiv);
        containerDescription.appendChild(productFigure);

        productDiv.appendChild(productImg);
        productDiv.appendChild(containerDescription);

        cardsContainer.appendChild(productDiv);

    
    }
}
//Cerrar aside detalles
function closeDetails(){
    productDetails.classList.add('inactivo');
}
function openDetails(e){
    productDetails.classList.remove('inactivo');
    productDetailsImg.setAttribute('src' , e.target.src );
    cardDescripcionPrice.innerText = e.target.nextElementSibling.firstChild.firstChild.innerText;
    cardDescripcionTitle.innerText = e.target.nextElementSibling.firstChild.lastChild.innerText;

    console.log(e);
}

createCards(productList);

Mi solución al toggle de todos los elementos.

Se que es algo pequeño pero me tomos varios minutos resolverlo. cuando abres el desktopMenu y en el siguiente paso abres prductDetailAside, ocurre que el desktop queda abierto por debajo. mi solución fue agregar una linea de código

function openProductDetailAside(){
//esta linea agrega desactivar el desktop mientras el productDetailAside este abierto.

    desktopMenu.classList.add('inactive');

    shoppingCartContainer.classList.add('inactive')

    productDetailContainer.classList.remove('inactive');
}```

Mi solución a esta clase sin condicionales

function toggleMiniMenu() {
    
    miniMenu.classList.toggle('inactive');
    carritoMenu.classList.add('inactive');
    detalleProducto.classList.add('inactive');
}

function toggleMobileMenu() {
    mobileMenu.classList.toggle('inactive');
    carritoMenu.classList.add('inactive');
    detalleProducto.classList.add('inactive');
}

function toggleCarritoMenu() {
    mobileMenu.classList.add('inactive');
    miniMenu.classList.add('inactive');
    carritoMenu.classList.toggle('inactive');
    detalleProducto.classList.add('inactive');
    
}

function abrirDetalleProducto() {
    detalleProducto.classList.remove('inactive');
    mobileMenu.classList.add('inactive');
    miniMenu.classList.add('inactive');
    carritoMenu.classList.add('inactive');
}

function cerrarDetalleProducto() {
    detalleProducto.classList.add('inactive');
}

Logré abrir y cerrar todos los menus y asides en una sola función (o algo parecido) y pude hacer que el datalle de cada producto renderice al que se le hace click y no uno fijo

// desktop menu
const email = document.querySelector(".navbar-email");
email.addEventListener("click", toggleMenu);

// mobile menu
const burgerMenu = document.querySelector(".menu");
burgerMenu.addEventListener("click", toggleMenu);

// shopping cart
const cartButton = document.querySelector(".navbar-shopping-cart");
cartButton.addEventListener("click", toggleMenu);

// product detail
const close = document.querySelector(".detail-close");
close.addEventListener("click", toggleMenu);

const components = [];
const mobileMenu = document.querySelector(".mobile-menu");
const desktopMenu = document.querySelector(".desktop-menu");
const shoppingCart = document.querySelector(".product-detail");
const detail = document.querySelector(".detail");
components.push(mobileMenu, desktopMenu, shoppingCart, detail);

function closeAll() {
  for (const component of components) {
    component.classList.add("toggleMenu");
  }
}

function openDetail(product) {
  closeAll();
  deleteDetail();

  detail.classList.remove("toggleMenu");
  detail.innerHTML = `
  <div class="detail-close">
    <img class="close" src="./icons/icon_close.png" alt="close">
  </div>
  <img
    src="${product.image}"
    alt="${product.name}"
  />
  <div class="info">
    <p>$${product.price}</p>
    <p>${product.name}</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>`;
  const close = document.querySelector(".detail-close");
  close.addEventListener("click", toggleMenu);
}

function deleteDetail() {
  const productDetail = document.querySelector(".detail");
  productDetail.innerHTML = "";
}

//abrir y cerrar los menus
function toggleMenu(event) {
  console.log({ event });
  console.log(event.target.className);

  const mobileMenu = document.querySelector(".mobile-menu");
  const desktopMenu = document.querySelector(".desktop-menu");
  const shoppingCart = document.querySelector(".product-detail");
  const detail = document.querySelector(".detail");

  switch (event.target.className) {
    case "navbar-email":
      openOne(desktopMenu);
      break;

    case "menu":
      openOne(mobileMenu);
      break;

    case "carrito":
      openOne(shoppingCart);
      if (!desktopMenu.classList.contains("toggleMenu")) {
        desktopMenu.classList.add("toggleMenu");
      }
      break;

    case "close":
      detail.classList.add("toggleMenu");
      break;

    case "detail-close":
      detail.classList.add("toggleMenu");
      break;

    default:
      break;
  }

  function openOne(open) {
    for (const component of components) {
      if (!component.classList.contains("toggleMenu") && component != open) {
        component.classList.add("toggleMenu");
      }
    }
    open.classList.toggle("toggleMenu");
  }
}

//products
const productList = [
  {
    name: "bike",
    price: 120,
    image:
      "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  },
  {
    name: "TV",
    price: 220,
    image:
      "data:image/jpeg;base64,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",
  },
  {
    name: "Phone",
    price: 1100,
    image:
      "data:image/jpeg;base64,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",
  },
  {
    name: "Plane",
    price: 650000,
    image:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJve9Ih1rK8iOC0H71GhQdT6r09qdPmzk93Q&usqp=CAU",
  },
  {
    name: "T-Shirt",
    price: 20,
    image:
      "data:image/jpeg;base64,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",
  },
  {
    name: "Shoes",
    price: 50,
    image:
      "data:image/jpeg;base64,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",
  },
  {
    name: "bike",
    price: 120,
    image:
      "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  },
  {
    name: "TV",
    price: 220,
    image:
      "data:image/jpeg;base64,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",
  },
  {
    name: "Phone",
    price: 1100,
    image:
      "data:image/jpeg;base64,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",
  },
  {
    name: "Plane",
    price: 650000,
    image:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJve9Ih1rK8iOC0H71GhQdT6r09qdPmzk93Q&usqp=CAU",
  },
  {
    name: "T-Shirt",
    price: 20,
    image:
      "data:image/jpeg;base64,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",
  },
  {
    name: "Shoes",
    price: 50,
    image:
      "data:image/jpeg;base64,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",
  },
];

function getProducts(arr) {
  const cardsContainer = document.querySelector(".cards-container");
  arr.forEach((product) => {
    const productCard = document.createElement("div");
    productCard.classList.add("product-card");

    const image = document.createElement("img");
    image.setAttribute("src", product.image);
    image.addEventListener("click", () => {
      openDetail(product);
    });
    productCard.append(image);

    const productInfo = document.createElement("div");
    productInfo.classList.add("product-info");
    productCard.append(productInfo);

    const div = document.createElement("div");
    productInfo.append(div);

    const price = document.createElement("p");
    price.innerText = `$${product.price}`;
    div.append(price);

    const name = document.createElement("p");
    name.innerText = product.name;
    div.append(name);

    const figure = document.createElement("figure");
    productInfo.append(figure);

    const cartImg = document.createElement("img");
    cartImg.setAttribute("src", "./icons/bt_add_to_cart.svg");
    figure.append(cartImg);

    cardsContainer.append(productCard);
  });
}

getProducts(productList);

Lo hice viendo como resolvimos los problemas anteriores con el If, asi funciona con todas las combinaciones y usando el toggle en el open, con esto funciona tanto cerrando con el boton de cerrar como dandole click denuevo a la imagen

const menuEmail = document.querySelector ('.navbar-email');
const desktopMenu = document.querySelector ('.desktop-menu');
const menuHamIcon = document.querySelector ('.menu');
const mobileMenu = document.querySelector ('.mobile-menu');
const carrito = document.querySelector ('.navbar-shopping-cart');
const productDetailCloseIcon = document.querySelector ('.product-detail-close');
const shoppingCartContainer = document.querySelector ('#shoppingCartContainer');
const productDetailContainer = document.querySelector ('#productDetail');
const cardsContainer = document.querySelector('.cards-container');

menuEmail.addEventListener('click', toggleDesktopMenu);
menuHamIcon.addEventListener('click', toggleMobileMenu);
carrito.addEventListener('click', togglecarrito);
productDetailCloseIcon.addEventListener('click', closeProductDetailAside);

function toggleDesktopMenu() {
    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
    const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
    if (!isAsideClosed) {
        shoppingCartContainer.classList.add('inactive');
    } if (!isProductDetailClosed) {
        productDetailContainer.classList.add('inactive');
    }
    desktopMenu.classList.toggle('inactive');
};

function toggleMobileMenu() {
    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
    const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
    if (!isAsideClosed) {
        shoppingCartContainer.classList.add('inactive');
    } if (!isProductDetailClosed) {
        productDetailContainer.classList.add('inactive');
    }
    mobileMenu.classList.toggle('inactive');
    
};

function togglecarrito() {
    const isMenuMobileClosed = mobileMenu.classList.contains('inactive');
    const isMenuDesktopClosed = desktopMenu.classList.contains('inactive');
    const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
if (!isMenuMobileClosed) {
    mobileMenu.classList.add('inactive');
} if (!isMenuDesktopClosed) {
    desktopMenu.classList.add('inactive');
} if (!isProductDetailClosed) {
    productDetailContainer.classList.add('inactive');
}
shoppingCartContainer.classList.toggle('inactive');
}

function openProductDetailAside() {
    productDetailContainer.classList.toggle('inactive');
    const isMenuMobileClosed = mobileMenu.classList.contains('inactive');
    const isMenuDesktopClosed = desktopMenu.classList.contains('inactive');
    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
    if (!isMenuMobileClosed) {
        mobileMenu.classList.add('inactive');
    } if (!isMenuDesktopClosed) {
        desktopMenu.classList.add('inactive');
    } if (!isAsideClosed) {
    shoppingCartContainer.classList.add('inactive');
}
}

function closeProductDetailAside() {
    productDetailContainer.classList.add('inactive');

}

Cerrar y abrir elementos con un solo toggle en una unica función
En los ejercicios realizados en clase se desarrollaron 4 funciones para poder aplicar el valor “inactive” a los elementos que no queríamos abrir y este mismo valor se le removía al elemento que si deseamos mostrar. Desarrolle una función corta que se pudiera utilizar en lugar de las 4 funciones desarrolladas en clase, teniendo así una función totalmente reutilizable en todos los addEventListener para ocultar o mostrar elementos.

Esto me funcionó super, no se si esté bien

const ProductCardsDetails = document.querySelector('.product-cards-details');
const closeProductCardsDetails = document.querySelector('.product-cards-details-close');

function openProductCardsDetails(){
    ProductCardsDetails.classList.remove('inactive');
    categoryBurgerMenu.classList.add('inactive');
    carProductsAside.classList.add('inactive'); 
}
closeProductCardsDetails.addEventListener('click', closeProductCDetails)
function closeProductCDetails(){
    ProductCardsDetails.classList.add('inactive');
}

Esta es mi solución:

Yo cuando vi que ahora necesitabamos jugar con las combinaciones para hacer cerrar y abrir los elementos me puse como reto hacerlo sin ver cómo lo hacía Juan. Como igual ya era algo que hemos hecho me pareció sencillo y me quedó funcionando al 1000% ya después me salte hasta que ví que Juan lo había concluido y era el fin de la clase 😄 Muy feliz. Saludos!

Fui resolviendo de esta manera, aparentemente todo funciona y los colapsos se mantienen bien. Cuantas formas de hacer lo mismo pueden pensar?

Que tremendo curso!
Bueno, en mi caso, yo intenté hacerle así a la creación del contenedor principal.

function renderProducts (arr) {

var contador = 0;

for(product of arr){

    stringHTML = `<div class='product-card'>
    <img src="` + product.img + `" id="imagen-`+contador+`" alt="Imagen del producto">
    <div class="product-info">
    <div>
        <p>` + product.price+ `</p>
        <p>` + product.name + `</p>
        </div>
        <figure>
            <img src="./icons/bt_add_to_cart.svg" alt="">
        </figure>
    </div>
    </div>
    `;

    cardsContainer.innerHTML += stringHTML;
    contador++;

}

}

Éntonces, decidí trabajar con el mismo paradigma de realizar un for y asignar a cada imagen un id diferente con un contador numérico…solo por reto…

function renderProductsForImg(arr){
var contador = 0;
for(product of arr){
const imgProduct = document.querySelector(’#imagen-’+contador+’’);
imgProduct.addEventListener(‘click’,openProductDetailAside);

    const detailMenu = document.querySelector('#product-detail');
    function openProductDetailAside() {
        detailMenu.classList.remove('inactive');

        if(!shoppingMenu.classList.contains('inactive')){
            shoppingMenu.classList.add('inactive');
        }

    }

    const closeDetailMenu = document.querySelector('.product-detail-close, .title-container');
    closeDetailMenu.addEventListener('click',closeProductDetailAside);

    function closeProductDetailAside() {
        detailMenu.classList.add('inactive');

        if(!shoppingMenu.classList.contains('inactive')){
            shoppingMenu.classList.add('inactive');
        }

    }

    contador++;

}

}

Y si me pregunta, no sé si sea una buena práctica o no xD pero no me arrepiento xD

Hola.

Comparto mi solución para la creación del aside(detalles del producto).
Recordando que la variable ‘producto’ guarda la lista de productos definida anteriormente.

Cuando el usuario da click a una imagen de un producto invocará una única función que abre, ycrea el aside con los datos, también cierra los menús abiertos.

Buenas, faltó cerrar el menú desktop al abrir el product detail y vice versa, aqui esta mi solución.

function toggleDesktopMenu() {
    const isCarritoComprasClosed = carritoDeCompras.classList.contains('inactive');

    if (!isCarritoComprasClosed) {

            carritoDeCompras.classList.add("inactive");
       
    }
    //mando cerrar el produtc detail siempre antes de abrir el menu desktop
 productDetailContainer.classList.add('inactive');
 
desktopMenu.classList.toggle('inactive');
}

y vice versa 

function openProductDetailContainer() {
    desktopMenu.classList.toggle('inactive');
    carritoDeCompras.classList.toggle("inactive")
    productDetailContainer.classList.remove('inactive');

    
}

Debo mejorar mi orden del código, tengo un desmaaaye. Y debo manejar mejor el nombre de las variables, creo que desde la maquetacion y estilos podemos mejorar por mucho eso.

Me encantaaaaaaaa

Lo hice sin usar condicionales, funciona todo correctamente 😄

opcEmail?.addEventListener("click", showHideMenuDesktop);
iconMenu?.addEventListener("click", showHideMenuMobile);
iconShopping?.addEventListener("click", showHideShoppingCar);
btnClose?.addEventListener('click', hideDetailProduct)

function showHideMenuDesktop() {
  desktopMenu?.classList.toggle("inactive");
  productShopping?.classList.add("inactive");
  showDetail?.classList.add("inactive");
}
function showHideMenuMobile() {
  mobileMenu?.classList.toggle("inactive");
  productShopping?.classList.add("inactive");
  showDetail?.classList.add("inactive");
}
function showHideShoppingCar() {
  productShopping?.classList.toggle("inactive");
  mobileMenu?.classList.add("inactive");
  desktopMenu?.classList.add("inactive");
  showDetail?.classList.add("inactive");
}
function showDetailProduct(){
  showDetail?.classList.remove('inactive');
  productShopping?.classList.add("inactive");
  mobileMenu?.classList.add("inactive");
  desktopMenu?.classList.add("inactive");
}

function hideDetailProduct(){
  showDetail?.classList.add("inactive");
}

Asi quedo mi solución

function toggleDesktopMenu()
{
    mobileMenu.classList.add('inactive');
    aside.classList.add('inactive');
    productDetailContainer.classList.add('inactive');
    desktopMenu.classList.toggle('inactive');
}

function toggleMobileMenu()
{
    desktopMenu.classList.add('inactive');
    aside.classList.add('inactive');
    productDetailContainer.classList.add('inactive');
    mobileMenu.classList.toggle('inactive');
}

function toggleCartAside()
{
    desktopMenu.classList.add('inactive');
    mobileMenu.classList.add('inactive');
    productDetailContainer.classList.add('inactive');
    aside.classList.toggle('inactive');
}

function openProductDetail()
{
    desktopMenu.classList.add('inactive');
    mobileMenu.classList.add('inactive');
    aside.classList.add('inactive');
    productDetailContainer.classList.remove('inactive');
}

function closeProductDetail()
{
    productDetailContainer.classList.add('inactive');
} 

Esta es la forma que lo hice yo, funciona todo

navmenu.addEventListener("click", toggleMenuDesktop);
burguerMenu.addEventListener("click", toggleMenuMobile);
menuCarritoIcon.addEventListener("click", toggleCarrito);
closeMenuInfo.addEventListener("click", removeMenuInfo);
function toggleMenuDesktop() {
  aside.classList.add("inactive");
  productDetailsContainer.classList.add("inactive");
  desktopMenu.classList.toggle("inactive");

}

function toggleMenuMobile() {
  aside.classList.add("inactive");
  productDetailsContainer.classList.add("inactive");
  menuMobile.classList.toggle("inactive");

}

function toggleCarrito() {
  menuMobile.classList.add("inactive");
  desktopMenu.classList.add("inactive");
  productDetailsContainer.classList.add("inactive");
  aside.classList.toggle("inactive");
}
function openProductDetails(){
    productDetailsContainer.classList.remove("inactive");
    menuMobile.classList.add("inactive");
    desktopMenu.classList.add("inactive");
    aside.classList.add("inactive");

}

function removeMenuInfo(){
    productDetailsContainer.classList.add("inactive");
}

✨🦄

Para mí la lógica más adecuada es la que implica utilizar el return de la función toggle()
Con las funciones que muestro a continuación se pudieron hacer todas las combinaciones funcionando realmente bien! c:

function toogleMobileMenu() {
  // Si el menú móvil se activa (es decir, se remueve la clase "inactive-mobile_menu")
  if (!mobileMenu.classList.toggle("inactive-mobile_menu")) {
    mobileMenuBlurBackground.classList.remove("inactive-mobile_menu");
    // Bloquea el scroll del body
    bodyElement.classList.add("no-scroll");
    // Si el carrito de compras está activo, lo desactiva
    if (!shoppingCartContainer.classList.contains("inactive-shopping-cart")) {
      shoppingCartContainer.classList.add("inactive-shopping-cart");
    }
  } else {
    // Si el menú móvil se desactiva, desbloquea el scroll del body
    bodyElement.classList.remove("no-scroll");
    mobileMenuBlurBackground.classList.add("inactive-mobile_menu");
  }
}

function toogleShoppingCart() {
  // Si el carrito de compras se activa (es decir, se remueve la clase "inactive-shopping-cart")
  if (!shoppingCartContainer.classList.toggle("inactive-shopping-cart")) {
    // Si el menú móvil está activo, lo desactiva
    if (!mobileMenu.classList.contains("inactive-mobile_menu")) {
      mobileMenu.classList.add("inactive-mobile_menu");
      mobileMenuBlurBackground.classList.add("inactive-mobile_menu");
    }
    //Si el detalle del producto está abierto, lo cerramos
    if (!productDetail.classList.contains("inactive-shopping-cart")) {
      productDetail.classList.add("inactive-shopping-cart");
    }
  }
}

function openProductDetailAside() {
  productDetail.classList.remove("inactive-shopping-cart");
  if (!shoppingCartContainer.classList.contains("inactive-shopping-cart")) {
    shoppingCartContainer.classList.add("inactive-shopping-cart");
  }
}

function closeProductDetailAside() {
  productDetail.classList.add("inactive-shopping-cart");
}

Dejo mi aporte 💚 como lo solucione.

<function toggleDesktopMenu () {
    shoppingCartMenu.classList.add('inactive');
    desktopMenu.classList.toggle('inactive');
    closeProductDetailAside();
}

function toggleMobileMenu(){
    shoppingCartMenu.classList.add('inactive');
    mobileMenu.classList.toggle('inactive');
    closeProductDetailAside();
}

function toggleAsideMenu(){
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    shoppingCartMenu.classList.toggle('inactive');
    closeProductDetailAside();
}

function openProducDetailAside(){
    productDetailContainer.classList.remove('inactive');
    shoppingCartMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
}

function closeProductDetailAside(){
    productDetailContainer.classList.add('inactive');
}> 

Mi solucion, agregue todos los “PopUps” a una lista para trabajar todas las query del mismo comportamiento

const listaPopUp=[desktopMenu,mobileMenu,shoppingCartContainer,productDetailContainer];

productDetailClose.addEventListener('click',function(){
    closePopUp(productDetailContainer);
})
menuEmail.addEventListener('click',function () {
    manejoPopUp(desktopMenu,listaPopUp);
  });


burgerMenu.addEventListener('click', function(){
    manejoPopUp(mobileMenu,listaPopUp);
})

shoppingCartMenu.addEventListener('click', function(){
    manejoPopUp(shoppingCartContainer,listaPopUp);
});




function manejoPopUp(popUp,listaPopUp){
    const arrAux = [...listaPopUp];
    let index = arrAux.indexOf(popUp);
    arrAux.splice(index,1);
    if (popUp==productDetailContainer){
        openPopUp(popUp);
        closePopUps(arrAux);
    }
    else{
        togglePopUp(popUp);
        closePopUps(arrAux);
    }
    }

function togglePopUp (popUp) {
    popUp.classList.toggle('inactive');   
    };

function closePopUps(listaPopUp){
    listaPopUp.map(closePopUp);
}

function closePopUp(popUp){
    popUp.classList.add('inactive');
}

function openPopUp(popUp){
    popUp.classList.remove('inactive');
}

💚💚💚Mi solución💚💚💚

function toggleDestopMenu(){  
    desktopMenu.classList.toggle('inactive')  
    if (!desktopMenu.classList.contains('inactive')) {
      shoppingCartDetail.classList.add("inactive") ||
        productDetail.classList.add("inactive");
    }  
}


function toggleMobileMenu() {
  mobileMenu.classList.toggle('inactive');
  if (!mobileMenu.classList.contains('inactive')) {
    shoppingCartDetail.classList.add("inactive") ||
      productDetail.classList.add("inactive");
  }
}

function toggleshoppingCartDetail () {
  shoppingCartDetail.classList.toggle('inactive');
  if (!shoppingCartDetail.classList.contains('inactive') ) {
    mobileMenu.classList.add("inactive") ||
      desktopMenu.classList.add("inactive") ||
      productDetail.classList.add("inactive");
  }  
}

function openProductDetailAside(){
  productDetail.classList.remove('inactive')
  if (!productDetail.classList.contains("inactive")) {
    shoppingCartDetail.classList.add("inactive") ||
      mobileMenu.classList.add("inactive") ||
      desktopMenu.classList.add("inactive");
  }  
}
function closeProductDetailAside(){
  productDetail.classList.add("inactive");
}

fue mas el susto que el problema, se me hizo muy sencillo y me sorprendi al ver que tome la decision de cerrar todo antes de verlo en la clase

Agregar Funcionalidad a la Vista

• Para agregar funcionalidad a nuestra vista, comenzamos por incorporar el componente “productDetail” a nuestro HTML y comprobamos que los estilos CSS funcionan correctamente incluso cuando se aplican a elementos muy similares.
• El siguiente paso es permitir que este nuevo componente se muestre u oculte cuando hacemos clic en los productos que hemos agregado a nuestro HTML utilizando JavaScript a partir de un “array”.
• Es importante que esta funcionalidad funcione de manera independiente y no afecte otras partes de la vista, como el menú móvil o el carrito de compras.
• Para lograr esto, podemos usar “eventListeners” para detectar los clics en las imágenes de productos y abrir o cerrar el “productDetail” en consecuencia.
• También debemos tener en cuenta que si hacemos clic en una imagen de producto mientras el “productDetail” ya está abierto, no debería cerrarse automáticamente. En cambio, deberíamos proporcionar un botón separado para cerrar el “productDetail”.

Selección de Elementos desde JavaScript

• Aunque los elementos HTML de los productos no están presentes en nuestro HTML inicial, están siendo generados dinámicamente en JavaScript con la función “renderProducts”. Esto significa que podemos seleccionar estos elementos de la misma manera que cualquier otro elemento HTML.
• Podemos asignarles eventos como “addEventListener” y definir qué sucede cuando se hace clic en ellos.

Abrir el “productDetail”

• Para abrir el “productDetail”, podemos crear una función llamada “openProductDetailAside”. Dentro de esta función, seleccionamos el contenedor del “productDetail” y eliminamos la clase “inactive” para que se muestre en la vista.
• Es importante asegurarse de que esta función se pueda ejecutar sin importar si ya está abierto o cerrado.

Cerrar el “productDetail”

• Para cerrar el “productDetail”, creamos una función llamada “closeProductDetailAside”. Dentro de esta función, volvemos a seleccionar el contenedor del “productDetail” y le agregamos la clase “inactive” para ocultarlo.
• Al igual que con la función de apertura, esta función debe poder cerrar el “productDetail” incluso si ya está cerrado.

Gestionar la Interacción entre Elementos

• Para garantizar que los elementos se gestionen correctamente en conjunto, implementamos condicionales que verifican el estado de otros elementos antes de abrir o cerrar un elemento determinado.
• Por ejemplo, si el “productDetail” está abierto y se intenta abrir el carrito de compras o el menú móvil, primero debemos cerrar el “productDetail”.
• Del mismo modo, si el carrito de compras está abierto y se intenta abrir el “productDetail”, debemos cerrar el carrito de compras antes de abrir el “productDetail”.
• Esta lógica asegura que los elementos se muestren y oculten correctamente y que no haya conflictos en la interacción del usuario.
• También se aborda el caso en el que un elemento ya está abierto y se intenta abrir el mismo elemento nuevamente. En este caso, el elemento debe permanecer abierto.

Pruebas y Depuración

• Después de implementar la funcionalidad, es importante realizar pruebas exhaustivas para garantizar que todos los escenarios funcionen como se espera.
• Se recomienda probar todas las combinaciones posibles de apertura y cierre de elementos, como abrir y cerrar el carrito de compras, abrir y cerrar el menú móvil y abrir y cerrar el “productDetail”.
• Cualquier problema o error encontrado durante las pruebas debe ser registrado y, si es posible, se debe proporcionar una solución junto con la descripción del problema.
• Una vez que todas las pruebas sean exitosas y la funcionalidad se ejecute sin problemas en todas las situaciones, la vista estará lista para ser fusionada en el proyecto principal.

Conclusión

• Con la funcionalidad de JavaScript agregada correctamente a la vista, podemos proceder a enviar una solicitud de extracción (“pull request”) al repositorio principal del proyecto para que el desarrollador principal revise y fusiona nuestros cambios.
• Es importante proporcionar una descripción clara de los cambios realizados, cómo se probó la funcionalidad y cualquier problema que se haya resuelto durante el proceso.
• Con esto, la vista estará lista para ser utilizada en el proyecto principal con todas las interacciones y funcionalidades implementadas.

A mi me funciono de diferente manera

resolvi todas las funciones de la siguiente manera:

//array con las secciones de menu
const sectionSelect =[
    desktopMenu,
    mobileMenu,
    asideMyorders,
    productDetail,
]
menuEmail.addEventListener('click',() =>selecionarSection(0))// funcion cuando se hace click
menuMobile.addEventListener('click',() =>selecionarSection(1))
menuCarrito.addEventListener('click',() =>selecionarSection(2))
flechaCarrito.addEventListener('click',() =>selecionarSection(2))
closeProductDetail.addEventListener('click',() =>selecionarSection(3))
//() =>selecionarSection(3) funcion de flecha , para poder pasar valores a la funcion

function selecionarSection(section){
    for (let index = 0; index < sectionSelect.length; index++) {
        const element = sectionSelect[index];
        if (index==section) {
            element.classList.toggle('inactive');
        }else{
            element.classList.add('inactive');
        }
    }
}