
document.addEventListener("DOMContentLoaded",(e)=>{




    let listElements = document.querySelectorAll(".list__button--click")
    
    listElements.forEach(listElement => {
        listElement.addEventListener("click",()=>{
          listElement.classList.toggle("arrow")

          let height = 0
          let menu = listElement.nextElementSibling;
          if(menu.clientHeight == 0){
              height = menu.scrollHeight
          }
          menu.style.height = `${height}px`
        })
    });




    const modalButton = document.querySelector("#modalbutton")
    
    modalButton.addEventListener("click",(e)=>{
      handleModal()
    })
    const modalclose = document.querySelector("#modalclose")
    
    modalclose.addEventListener("click",(e)=>{
      handleModal()
    })
    const handleModal = () => {
        const modal = document.querySelector("#menumodal")
        if (modal?.classList.contains("fixed")) {
          modal?.classList.add("fade-up")
          modal?.classList.remove("fade-down")
          setTimeout(() => {
            modal?.classList.remove("fixed")
            modal?.classList.add("hidden")
            document.body.style.overflow = "auto"
          }, 450)
        } else {
          document.body.style.overflow = "hidden"
          modal?.classList.remove("fade-up")
          modal?.classList.add("fade-down")
          modal?.classList.add("fade-down")
          modal?.classList.remove("hidden")
          modal?.classList.add("fixed")
        }
      }
    
      
    
})
