No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Nuevo Curso Pr谩ctico de JavaScript

Nuevo Curso Pr谩ctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Carrito de compras

20/26
Recursos

Aportes 35

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.


Lo que hice fue agregar esos dos parrafitos para que cuando abra uno, el otro (que obviamente no tiene la clase 鈥樷榠nactive鈥欌 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

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 鈥渕ain-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 鈥減ara hacer click鈥 asociados a sus correspondientes 鈥渕en煤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 鈥減roblema鈥 (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 鈥渁side鈥 lo llame 鈥渃arritoDeCompras鈥

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')
  }
}