Primero añadimos los detalles de producto en nuestro body y agregamos los estilos no repetidos.
Le añadimos la clase inactive trabajada anteriormente para que desaparezca del html.
Queremos que este reaccione al click del carrito de compras, asi que en el javascript repetimos los pasos realizados en clases anteriores.
const carMenuIcon = document.querySelector(".navbar-shopping-cart");
const aside = document.querySelector(".product-detail");
carMenuIcon.addEventListener("click", toggleCarMenuAside);
function toggleCarMenuAside() {
aside.classList.toggle("inactive");
}
Pero nos damos cuenta de un problema, y es que lo ideal seria que cuando abramos una sección la otra se cierre y no que se superpongan una con otra. Para esto solo realizaremos una validación.
function toggleCarMenuAside() {
const isMobileMenuOpen = !mobileMenu.classList.contains("inactive");
const isDesktopMenuOpen = !desktopMenu.classList.contains("inactive");
if (isMobileMenuOpen || isDesktopMenuOpen) {
mobileMenu.classList.add("inactive");
desktopMenu.classList.add("inactive");
}
aside.classList.toggle("inactive");
}
- Las dos constantes indican si el menu está abierto, para mobile y desktop respectivamente.
- Con un if evaluamos que si esta abierto entonces la cerremos para despues abrir el aside.
Ahora realizamos lo mismo para las funciones realizadas en clases anteriores.
function toggleDesktopMenu() {
const isAsideOpen = !aside.classList.contains("inactive");
if (isAsideOpen) aside.classList.add("inactive");
desktopMenu.classList.toggle("inactive");
}
function toggleMobileMenu() {
const isAsideOpen = !aside.classList.contains("inactive");
if (isAsideOpen) aside.classList.add("inactive");
mobileMenu.classList.toggle("inactive");
}