Carrito de compras

Lo que hice fue agregar esos dos parrafitos para que cuando abra uno, el otro (que obviamente no tiene la clase ‘‘inactive’’ porque está abierto) se le agregue la clase inactive. Así cuando uno abre el otro cierra y viceversa.

Creo que el aside quedaría mejor dentro del nav, ya que sigue siendo un desplegable parte del nav, igual que los anteriores

Ya es la hora.
https://platzi.com/academy/

Hola compañeros, les traigo un plus a esta clase que creo que puede ser de mucha ayuda, seria que si un menú esta abierto, o el carrito de compras para cerrarlo podemos tambien dar click en cualquier parte del “main-container”.
Es decir cerrar cualquier de los 3 menús que este abierto dando click en cualquier otra parte.

// selecionamos nuestro main container. 
const mainContainer = document.querySelector(".main-container");

// creamos una funcion que va a validar si alguno de los 2 menus o el carrito de compras este abierto y va a cerrarlo si esta abierto. 
function colseMenusClick() {

    const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
    const isDesktopMenuClosed = desktopMenu.classList.contains('inactive')
    const isCarritoComprasClosed = carritoDeCompras.classList.contains('inactive');
    
    if (!isMobileMenuClosed || !isDesktopMenuClosed || !isCarritoComprasClosed )  {

        mobileMenu.classList.add("inactive");
        desktopMenu.classList.add("inactive");   
        carritoDeCompras.classList.add("inactive");
   
    }

}


// añadimos un evento de escucha y llamamos a la funcion antes creada  
mainContainer.addEventListener('click', colseMenusClick);

Espero haber ayudado !

Yo lo solucione de esta manera

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

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

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

Basicamente primero garantizo que el resto de menus esten ocultos para luego mostrar el menu que debe salir.

este es el bloque de comando que utilize para quitar el menu cuando abro el carrito

const navmenu = document.querySelector(".navbar-email");
const burguerMenu  = document.querySelector(".menu");
const menuCarritoIcon = document.querySelector(".navbar-shopping-cart")
const desktopMenu = document.querySelector(".desktop-menu");
const menuMobile = document.querySelector(".mobile-menu");
const aside = document.querySelector(".product-detail");


navmenu.addEventListener("click", toggleMenuDesktop);
burguerMenu.addEventListener("click", toggleMenuMobile);
menuCarritoIcon.addEventListener("click", toggleCarrito);

function toggleMenuDesktop(){
    desktopMenu.classList.toggle("inactive");
    aside.classList.add("inactive");

}

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

}

function toggleCarrito(){
    aside.classList.toggle("inactive");
    menuMobile.classList.add("inactive");
    desktopMenu.classList.add("inactive");

}

La parte final la solucioné de la siguiente manera:

function toggleCartMenu() {
    const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
    const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');

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

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

He tomado una rutina de ver primero cómo resuelve Juan casi la totalidad de la clase, poniendo la mayor atención posible para entender cómo y porque hace las cosas, luego me pongo a realizar por mi cuenta los ejercicios evitando revisar la solución de la clase. Creo que esta técnica me ayuda a fortalacer mi memoria y capacidad para captar en un primer momento la forma de solucionar problemas, y siento que me motiva más porque me da confianza de poder solucionar las cosas cuando no tenga recursos como estas clases cuando consiga un empleo. Por ejemplo, esta clase la ví el día anterior a escribir este comentario, y hasta la tarde de hoy pude recordar lo que se tenía que hacer, la funcionalidad del carrito de compras y evitar que los menús se queden abiertos, y solo revisé de nuevo la clase porque no recordaba la propiedad contains para cerrar los menús, lo demás lo hice solo recordando lo que hacía Juan. Espero que esta práctica me ayude fortalecer mis conocimientos en HTML, CSS y JS para posteriormente hacer proyectos de ejemplo para crear un portafolio. Saludos 👋

Yo lo solucioné asi. jiji
cuando aprietan sobre el carrito, cierro todo lo posiblemente abierto.

Mi versión para validar la visibilidad de cada cosa:

/**
 * Almacenamos los nodos en constantes
 */
const navEmail = document.querySelector(".navbar-email");
const desktopMenu = document.querySelector(".desktop-menu");

const slideMenu = document.querySelector(".mobile-menu");
const burguerButton = document.querySelector(".menu");

const checkoutIcon = document.querySelector(".navbar-shopping-cart");
const aside = document.querySelector(".product-detail");

// Añadimos los eventos a los nodos
navEmail.addEventListener("click", toggleDesktopMenu);
burguerButton.addEventListener("click", toggleSlideMenu);
checkoutIcon.addEventListener("click", toggleAside);

/**
 * Los eventos para ocultar los nodos
 */
function toggleDesktopMenu() {
  desktopMenu.classList.contains("inactive") && setNodesInactive();
  desktopMenu.classList.toggle("inactive");
}

function toggleSlideMenu() {
  slideMenu.classList.contains("inactive") && setNodesInactive();
  slideMenu.classList.toggle("inactive");
}

function toggleAside() {
  aside.classList.contains("inactive") && setNodesInactive();
  aside.classList.toggle("inactive");
}

function setNodesInactive() {
  desktopMenu.classList.add("inactive");
  slideMenu.classList.add("inactive");
  aside.classList.add("inactive");
}

// Nos aseguramos que todos los nodos estén ocultos
setNodesInactive();

function lanzar(oprimir, lanzar) {
  const c1 = document.querySelector(oprimir)
  const c2 = document.querySelector(lanzar)

  function active() {
    c2.classList.toggle('inactive')
  }
  c1.addEventListener('click', active)
}

function esconder(oprimir, esconder) {
  const c1 = document.querySelector(oprimir)
  const c2 = document.querySelector(esconder)
  function inactive() {
    const isC1Active = !c1.classList.contains('inactive')
    const isC2Active = !c2.classList.contains('inactive')

    if (isC1Active && isC2Active) {
      c2.classList.add('inactive')
    }
  }

  c1.addEventListener('click', inactive)

}

lanzar('.navbar-email','.desktop-menu'); 
esconder('.navbar-email', '.product-detail')

lanzar('.menu','.mobile-menu')
esconder('.menu', '.product-detail')

lanzar('.navbar-shopping-cart','.product-detail')
esconder('.navbar-shopping-cart','.mobile-menu')
esconder('.navbar-shopping-cart','.desktop-menu')

Les tengo una forma más rápida de hacer esta parte:
.
.
.

const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const burgerMenu = document.querySelector('.menu');
const mobileMenu = document.querySelector('.mobile-menu');
const shoppingIcon = document.querySelector('.navbar-shopping-cart');
const asideProductDetail = document.querySelector('.product-detail');

menuEmail.addEventListener('click', toggleDesktopMenu);
burgerMenu.addEventListener('click', toggleMobileMenu);
shoppingIcon.addEventListener('click', toggleProductDetail);

function toggleDesktopMenu() {
  desktopMenu.classList.toggle('inactive');
  if (!asideProductDetail.classList.contains('inactive')) {
    asideProductDetail.classList.add('inactive');
  }
}

function toggleMobileMenu() {
  mobileMenu.classList.toggle('inactive');
  if (!asideProductDetail.classList.contains('inactive')) {
    asideProductDetail.classList.add('inactive');
  }
}

function toggleProductDetail() {
  asideProductDetail.classList.toggle('inactive');
  if (!mobileMenu.classList.contains('inactive')) {
    mobileMenu.classList.add('inactive');
  }
}

.
.
Básicamente en cada función pregunta si el otro menu o aside está abierto, si lo está le asigna la clase inactive para que no se muestre.

A la hora de trabajar mucho con el teclado el estar agarrando el mouse para cambiar de pestaña es molesto es por esto que les comento que pueden usar
CTRL + TAB para cambiar de pestaña entre archivos HTML,CSS y JS para adelante y CTRL+SHIFT+TAB para atras
Espero les sirva =)

Hola, mi aporte sobre cómo terminé resolviendo el ejercicio. Espero les sirva!

// icons
const mailNavBarIcon = document.querySelector('.navbar-right .email');
const mobileHamIcon = document.querySelector('.menu');
const menuCartIcon = document.querySelector('.navbar-shopping-cart');

// toggle areas
const desktopMenu = document.querySelector('.desktop-menu');
const mobileMenu = document.querySelector('.mobile-menu');
const cartAside = document.querySelector('.aside-cart');

// toggle func
const toggleView = (elem) => {
    if (elem.classList.contains('aside-cart')) {
        desktopMenu.classList.add('inactive');
        mobileMenu.classList.add('inactive');
    } else if (elem.classList.contains('mobile-menu') || elem.classList.contains('desktop-menu')) {
        cartAside.classList.add('inactive');
    }
    elem.classList.toggle('inactive');
}


// event Listeners
mobileHamIcon.addEventListener('click', () => toggleView(mobileMenu));
mailNavBarIcon.addEventListener('click', () => toggleView(desktopMenu));
menuCartIcon.addEventListener('click', () => toggleView(cartAside));

creo que me complique mas de lo necesario para el codigo, pero funciona jajaja me gustaria leer su opinion para aprender mas.

const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const mobileMenu = document.querySelector('.mobile-menu');
const burgerMenu = document.querySelector('.menu');
const carritoMenuIcon = document.querySelector('.navbar-shopping-cart');
const aside = document.querySelector('.product-detail');


menuEmail.addEventListener('click',toggleDesktopMenu);
burgerMenu.addEventListener('click',toggleMobileMenu);
carritoMenuIcon.addEventListener('click',toggleCarritoAside);

function toggleDesktopMenu(){
   
        let emailNavbar='desktopMenu';
        closeWindows(emailNavbar);
}

function toggleMobileMenu(){
        let mobileMenu='mobileMenu';
        closeWindows(mobileMenu);
}

function toggleCarritoAside(){
        let carritoIcon='carritoDeCompras';
        closeWindows(carritoIcon);

}

function closeWindows(etiqueta){
    console.log(etiqueta);
    const isMobileMenuOpen = !mobileMenu.classList.contains('inactive');
    const isAsideOpen = !aside.classList.contains('inactive');
    const isdesktopMenuOpen = !desktopMenu.classList.contains('inactive');

    switch (etiqueta) {
        case 'desktopMenu':
            if (isAsideOpen) {
                aside.classList.add('inactive');
            }
            desktopMenu.classList.toggle('inactive');
            break;
        case 'carritoDeCompras':
            if (isdesktopMenuOpen) {
                desktopMenu.classList.add('inactive');
            }else if (isMobileMenuOpen) {
                mobileMenu.classList.add('inactive');
            }
            aside.classList.toggle('inactive');
            break;
        case 'mobileMenu':
            if (isAsideOpen) {
                aside.classList.add('inactive');
            }
            mobileMenu.classList.toggle('inactive');
            break
    }

}

Esta es mi solución

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

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

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

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

Yo quise adelantarme a todo lo que hacia el profesor así que termine con una lógica distinta, empecé validando con un if que tuviera la clase pero despues me di cuenta que era completamente innecesarios pues no saltaba ningún error si se intenta remover una clase inexistente:

const navR = document.querySelector('#navR')
const navbarR_email = document.querySelector('#user-email');
const openMenu = document.querySelector('#burger')
const mobileMenu = document.querySelector('#mobile-menu');
const closeMenu = document.querySelector('#close-menu');
const shoppingCar = document.querySelector('#shopping-car');
const order = document.querySelector('#my-order');

//desktop menu
navbarR_email.addEventListener('click', () => {
    order.classList.remove('show-shopping-car');
    navR.classList.toggle('show-menu')
})

//Movile menu
openMenu.addEventListener('click', () => {
    order.classList.remove('show-shopping-car');
    mobileMenu.classList.add('show-mobile-menu')
})

closeMenu.addEventListener('click', () => {
    mobileMenu.classList.remove('show-mobile-menu')
})

//shopping car
shoppingCar.addEventListener('click', () => {
    navR.classList.remove('show-menu');
    order.classList.toggle('show-shopping-car')
})

lo resolví un poco diferente, en mi caso preferí identificar si NO contenía la clase inactive, y en base a eso, utilizar el toggle. Me quedó así.

/* Declaración de variables */
const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const burgerMenu = document.querySelector('.menu');
const mobileMenu = document.querySelector('.mobile-menu');
const shoppingCart = document.querySelector('.navbar-shopping-cart');
const shoppingCartMenu = document.querySelector('.product-detail');

/* Desktop menu */
menuEmail.addEventListener('click', toggleDesktopMenu);

console.log(desktopMenu)
function toggleDesktopMenu() {
    desktopMenu.classList.toggle('inactive');
    if (!shoppingCartMenu.classList.contains('inactive')) {
        shoppingCartMenu.classList.toggle('inactive')
    }
}

/* Mobile menu */
burgerMenu.addEventListener('click', toggleBurgerMenu);

function toggleBurgerMenu() {
    mobileMenu.classList.toggle('inactive');
    if (!shoppingCartMenu.classList.contains('inactive')) {
        shoppingCartMenu.classList.toggle('inactive');
    }
}

/* Shopping cart menu */
shoppingCart.addEventListener('click', toggleShoppingCart);

function toggleShoppingCart() {
    shoppingCartMenu.classList.toggle('inactive');
    if (!desktopMenu.classList.contains('inactive')) {
        desktopMenu.classList.toggle('inactive');
    }
    if (!mobileMenu.classList.contains('inactive')) {
        mobileMenu.classList.toggle('inactive');
    }
}

La solución que encontré fue solamente remover la clase del carrito de compras cuando se abriera o se diera click en mi nav-bar

navMenu.addEventListener('click', () => {
    navMenu.classList.toggle('active');
    backMenu.style.display = "block";
    aside.classList.remove('active-car');
});

const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const menuHambur = document.querySelector('.menu');
const mobileMenu = document.querySelector ('.mobile-menu')
const shopcarticon = document.querySelector('.navbar-shopping-cart')
const productDetail = document.querySelector('.product-detail')

menuEmail.addEventListener('click',toggleDesktopmenu);
menuHambur.addEventListener('click',togglemobilemenu);
shopcarticon.addEventListener('click',togglecarticon);


function toggleDesktopmenu() {
    desktopMenu.classList.toggle('inactive');

    if ( productDetail.classList.contains('inactive')) {

    }else {
        productDetail.classList.add('inactive');
    }
}

function togglemobilemenu() {
    mobileMenu.classList.toggle('inactive');

    if (productDetail.classList.contains('inactive')) {
        
    }else{
        productDetail.classList.add('inactive');
    }
}

function togglecarticon() {
    productDetail.classList.toggle('inactive');
    //Condicional para que no se puedan abrir los dos
    if (desktopMenu.classList.contains('inactive')) {

    }else {

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

    if (mobileMenu.classList.contains('inactive')) {
        
    }else{
        (mobileMenu.classList.add('inactive'))
    }
}

Yo lo arregle de esta manera creo que es un poco largo pero es como se me hizo la mas sencilla

Esta solución permite agregar cualquier cantidad de elementos “para hacer click” asociados a sus correspondientes “menús para mostrar”. Si se muestra un menú, se oculta el resto.

const menuEmail = document.querySelector('.navbar-email');
const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
const menuHamIcon = document.querySelector('.menu');
const desktopMenu = document.querySelector('.desktop-menu');
const aside = document.querySelector('.product-detail');
const mobileMenu = document.querySelector('.mobile-menu');

menuElements = new Map ([
    [menuEmail, desktopMenu],
    [menuHamIcon, mobileMenu],
    [menuCarritoIcon, aside]
]);

for (const menuClickHere of menuElements.keys()) {
    menuClickHere.addEventListener('click', toggleMenu);
}

function toggleMenu() {
    for (const menuDisplay of menuElements.values()) {
        if (!menuDisplay.classList.contains('inactive')) {
            menuDisplay.classList.add('inactive');
        }
    }
    menuDisplay.get(this).classList.toggle('inactive');
} 

Para no repetir el código lo solucioné de la siguiente forma:

const toggleItem = (showElement, hideElement1, hideElement2) => {
  showElement.classList.toggle('inactive');
  hideElement1?.classList.add('inactive');
  hideElement2?.classList.add('inactive');
};

menuEmail.addEventListener('click', () =>
  toggleItem(desktopMenu, asideCartList, mobileMenu)
);
burgerMenuIcon.addEventListener('click', () =>
  toggleItem(mobileMenu, asideCartList, desktopMenu)
);
menuCartIcon.addEventListener('click', () =>
  toggleItem(asideCartList, desktopMenu, mobileMenu)
);

¡Hola! Por si alguno desea realizar la tarea les dejo mis apuntes 😄

function toggleCarritoAside(){
    const isEmailMenuClosed = desktopMenu.classList.contains("inactive");

    if(!isEmailMenuClosed){
        desktopMenu.classList.add("inactive");
    }
<code> 

Solo agregando esa primera linea en la funcion, se puede
arreglar el “problema” (CREO)…

function toggleCarritoAside()
{
    desktopMenu.classList.add('inactive'); // De esta forma siempre que entre a esta funcion, se cierra el desktop Menu
    const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
    
    
    if(!isMobileMenuClosed)
    {
        mobileMenu.classList.add('inactive');
    }
    asideMenu.classList.toggle('inactive');
}

comparto codigo, donde a cada funcion le realizo 2 classList.add para cerrar las otras dos ventanas cuando se abra esa en concreto agregandole la clase inactive

const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const mobileMenu = document.querySelector('.mobile-menu');
const menuHamIcon = document.querySelector('.menu');
const menuCarIcon = document.querySelector('.navbar-shopping-cart');
const aside = document.querySelector('.product-detail');

menuEmail.addEventListener('click', toggleDesktopMenu);
menuHamIcon.addEventListener('click', toggleMobilepMenu);
menuCarIcon.addEventListener('click', toggleCarritoAside);


function toggleDesktopMenu(){
    
    aside.classList.add('inactive');
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.toggle('inactive');//classList.toggle, quita o pone una clase dependiendo si la tiene o no
}

function toggleMobilepMenu(){
    desktopMenu.classList.add('inactive');
    aside.classList.add('inactive');
    mobileMenu.classList.toggle('inactive');

}

function toggleCarritoAside(){

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

Yo lo sulucione asi:

Estoy usando una sola funcion , por lo que tenia resolverlo de otra manera, lo que hice fue usar un if dentro de la funcion, que consulta si el elemnto que quiero Mostrar/Ocultar tiene la clase inactive o no, en caso de no tenerla se la agrega, el elemento es ocultado y ahi termina la funcion.
Peroooo si el elemento que quiero Mostrar/Ocultar si cuenta con la clase inactive, ahi lo que hace es pregunta si los otros menus tienen la clase inactive y si no la tienen se la agrega, de esta manera oculta todos los menus y en la siguiente linea le quita la clase inactive al menu que queremos mostrar.

La ventaja de esta forma de resolverlo, es que se usa una unica funcion y no se repite codigo innecesariamente.

quedo asi:

const menuEmail = document.querySelector(".navbar-email");
const desktopMenu= document.querySelector(".desktop-menu");
const hamburguesa= document.querySelector(".menu");
const menuMobile = document.querySelector(".mobile-menu");
const carrito= document.querySelector(".navbar-shopping-cart");
const producDetail = document.querySelector(".product-detail");

menuEmail.addEventListener("click", function(){toggleDesktopMenu(desktopMenu)});
hamburguesa.addEventListener("click", function(){toggleDesktopMenu(menuMobile)});
carrito.addEventListener("click", function(){toggleDesktopMenu(producDetail)});

function toggleDesktopMenu(elemento){
    
    if(!elemento.classList.contains("inactive")){
        elemento.classList.add("inactive"); 
      }
    else{
        if(!menuMobile.classList.contains("inactive"))
        {menuMobile.classList.add("inactive")};

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

        if(!producDetail.classList.contains("inactive"))
        {producDetail.classList.add("inactive")};
        
        elemento.classList.toggle("inactive");
        }
    }

Esta es mi solución para que al ejecutar cualquiera de las funciones se agregue la clase inactive a los otros desplegables

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

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

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

Si usaron la misma solución del Prof. así me quedó la función de
toggleAsideCart :

function toggleAsideCart() {
    
    const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
    const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');

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

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

trate de repetir el video varias veces, me perdí… jejeje

Les comparto mi lógica

const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const menuHamIcon = document.querySelector('.menu');
const mobileMenu = document.querySelector('.mobile-menu');
const menuCartIcon = document.querySelector('.navbar-shopping-cart');
const menuCart = document.querySelector('.product-detail');

menuEmail.addEventListener('click', toggleDesktopMenu);
menuHamIcon.addEventListener('click', toggleMobileMenu);
menuCartIcon.addEventListener('click', toggleCartIconMenu);

function toggleDesktopMenu(){
    desktopMenu.classList.toggle('inactive');

    if (!menuCartIcon.classList.contains('inactive')){
        menuCart.classList.toggle('inactive');
    }
}

function toggleMobileMenu(){
    mobileMenu.classList.toggle('inactive');

    if (!menuCart.classList.contains('inactive')){
        menuCart.classList.toggle('inactive');
    }
}

function toggleCartIconMenu(){
    menuCart.classList.toggle('inactive');

    if(!mobileMenu.classList.contains('inactive')){
        mobileMenu.classList.toggle('inactive');
    }

    if (!desktopMenu.classList.contains('inactive')){
        desktopMenu.classList.toggle('inactive');
    }
}

Esta fue mi solución, agregarle una variable mas a la función de nuestro carrito junto con una condidicional.

function toggleCarritoAside () {
    const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
    const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');
    
    if (!isDesktopMenuClosed) {
        desktopMenu.classList.add('inactive');
    }

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

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

Hola que tal, este es mi código para abrir y cerrar los menús que se solapan.

Lo hice de tal manera que se ocupe una sola función. ¿Cómo lo ven?

Yo decidi que cuando abrimos el carrito de compras se tiene que cerrar el menu desktop, les dejo la forma de como lo solucione, solo que en mi codigo el “aside” lo llame “carritoDeCompras”

function toggleCarritoCompras() {
    const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
    const isDesktopMenuClosed = desktopMenu.classList.contains('inactive')

    if (!isMobileMenuClosed || !isDesktopMenuClosed) {

        mobileMenu.classList.add("inactive");
        desktopMenu.classList.add("inactive");   
   
    }

    carritoDeCompras.classList.toggle("inactive")

}

se aprende demasiado la verdad!

Aqui les comparto mi codigo
Espero les sea util el aporte

const navEmail = document.querySelector('.navbar-email')
const desktopMenu = document.querySelector('.desktop-menu')
const burgerMenuIcon = document.querySelector('.menu')
const mobileMenu = document.querySelector('.mobile-menu')
const menuIconCar = document.querySelector('.navbar-shopping-cart')
const aside = document.querySelector('.product-detail')

navEmail.addEventListener('click', () => {
  desktopMenu.classList.toggle('inactive')
  isCarClose()
})

burgerMenuIcon.addEventListener('click', () => {
  mobileMenu.classList.toggle('inactive')
  isCarClose()
})

menuIconCar.addEventListener('click', () => {
  aside.classList.toggle('inactive')
  const isBurgerMenuClose = burgerMenuIcon.classList.contains('inactive')
  const isDesktopMenuClose = desktopMenu.classList.contains('inactive')
  
  if(!isBurgerMenuClose || !isDesktopMenuClose) {
    mobileMenu.classList.add('inactive')
    desktopMenu.classList.add('inactive')
  }
})

const isCarClose = () => {
  const isAsideClose = aside.classList.contains('inactive')
  if(!isAsideClose) {
    aside.classList.add('inactive')
  }
}