const burger = document.querySelector(".hamburger");
const nav = document.querySelector(".nav");
const navList = document.querySelector(".nav-list");
const burgerBar = document.querySelectorAll(".hamburger-bar");
const header = document.querySelector(".header")

burger.addEventListener("click", () => {
  nav.classList.toggle("active");
  navList.classList.toggle("nav-active");
  burgerBar.classList.toggle("bar-toggle")
})

function toggleHamburger() {
 burgerBar.forEach(burgerBar => burgerBar.classList.toggle('hamburger-bar-toggle'))
}

burger.addEventListener('click', toggleHamburger)

const burger = document.querySelector(".hamburger");
const nav = document.querySelector(".nav");
const navList = document.querySelector(".nav-list");
const burgerBar = document.querySelectorAll(".hamburger-bar");
const header = document.querySelector(".header")

burger.addEventListener("click", () => {
  nav.classList.toggle("active");
  navList.classList.toggle("nav-active");
  burgerBar.classList.toggle("bar-toggle")
})

function toggleHamburger() {
 burgerBar.forEach(burgerBar => burgerBar.classList.toggle('hamburger-bar-toggle'))
}

burger.addEventListener('click', toggleHamburger)

const showMenu = (toggleId, navId) =>{
    const toggle = document.getElementById(toggleId),
    nav = document.getElementById(navId)
    
    if(toggle && nav){
        toggle.addEventListener('click', ()=>{
            // We add the show-menu class to the div tag with the nav__menu class
            nav.classList.toggle('show-menu')
        })
    }
}
showMenu('nav-toggle','nav-menu')

const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
    const navMenu = document.getElementById('nav-menu')
    navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

const showMenu = (toggleId, navId) =>{
    const toggle = document.getElementById(toggleId),
    nav = document.getElementById(navId)
    
    if(toggle && nav){
        toggle.addEventListener('click', ()=>{
            // We add the show-menu class to the div tag with the nav__menu class
            nav.classList.toggle('show-menu')
        })
    }
}
showMenu('nav-toggle','nav-menu')

const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
    const navMenu = document.getElementById('nav-menu')
    navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))