document.addEventListener("DOMContentLoaded", () => {
  const menu = document.getElementById("my-menu");
  const toggleMenu = document.getElementById("toggle-menu");


  toggleMenu.addEventListener("click", (e) => {
    e.preventDefault();
    document.body.classList.toggle("mmenu-open");
    toggleMenu.classList.toggle("white"); // Add/remove white class


    if (menu.classList.contains("hidden")) {
      menu.classList.remove("hidden");
      requestAnimationFrame(() => {
        menu.style.right = "0";
        menu.style.opacity = "1";
        document.querySelector(".mmenu-toggle").style.right = "30%";
      });
    } else {
      menu.style.right = "-220px";
      menu.style.opacity = "0";
      document.querySelector(".mmenu-toggle").style.right = "20px";
      setTimeout(() => {
        menu.classList.add("hidden");
      }, 500); // ¾Ö´Ï¸ÞÀÌ¼Ç ÈÄ¿¡ display ¼Ó¼º º¯°æ
    }
  });


  // ¼­ºê¸Þ´º Åä±Û ±â´É Ãß°¡
  document.querySelectorAll("#my-menu > ul > li > a").forEach((menuItem) => {
    menuItem.addEventListener("click", (e) => {
      e.preventDefault();
      const parentLi = menuItem.parentElement;
      const subMenu = parentLi.querySelector("ul");
      if (parentLi.classList.contains("open")) {
        subMenu.style.maxHeight = "0";
        subMenu.style.opacity = "0";
        setTimeout(() => {
          parentLi.classList.remove("open");
          subMenu.style.display = "none";
        }, 500); // ¼­ºê¸Þ´º ¾Ö´Ï¸ÞÀÌ¼Ç ÈÄ¿¡ display ¼Ó¼º º¯°æ
      } else {
        parentLi.classList.add("open");
        subMenu.style.display = "block";
        requestAnimationFrame(() => {
          subMenu.style.maxHeight = "1000px";
          subMenu.style.opacity = "1";
        });
      }
    });
  });
});