main.js

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 aside = document.querySelector('.product-detail');
const cardsContainer = document.querySelector('.cards-container');

menuEmail.addEventListener('click',toggleDesktopMenu);
menuHamicon.addEventListener('click',toggleMobileMenu);
menuCarritoICon.addEventListener('click',toggleCarritoAside);


function toggleDesktopMenu() {
    const isasideClosed = aside.classList.contains('inactive');
  
    if (!isasideClosed) {
        aside.classList.add('inactive'); // si esta abierto el aside y abro destok se cierra

    }


    desktopMenu.classList.toggle('inactive')

}

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

}

function toggleCarritoAside() {

    const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
  
        if (!isMobileMenuClosed) {
            mobileMenu.classList.add('inactive');


        } 

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

function toggleMobileMenu() {

    const isasideClosed = aside.classList.contains('inactive');
  
        if (!isasideClosed) {
            aside.classList.add('inactive');

        }
         mobileMenu.classList.toggle('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: 'bike2',
    price: 125,
    image:  'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 
 });
 productList.push({
    name: 'bike3',
    price: 130,
    image:  'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 
 });

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);
    
        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 productImgCard = document.createElement('img');
        productImgCard.setAttribute('src','./icons/bt_add_to_cart.svg');
    
        productInfoFigure.appendChild(productImgCard);
    
        productInfo.appendChild(productInfoDiv);
        productInfo.appendChild(productInfoFigure);
    
        productCard.appendChild(productImg);
        productCard.appendChild(productInfo);
    
        cardsContainer.appendChild(productCard);
    
     }
}

renderProducts(productList);