class HeaderMenu {
   constructor() {
      this.burger = document.getElementById("burger");
      this.close = document.getElementById("close-btn");
      this.menu = document.getElementById("left-menu");
      this.body = document.body;

      if (!this.burger || !this.menu) return;

      this.initHandlers();
   }

   initHandlers() {
      this.burger.addEventListener("click", () => {
         this.toggleMenu();
      });

      this.close.addEventListener("click", () => {
         this.closeMenu();
      });

      document.addEventListener("click", (e) => {
         if (this.menu.classList.contains("open") && !this.menu.contains(e.target) && !this.burger.contains(e.target)) {
            this.closeMenu();
         }
      });

      document.addEventListener("keydown", (e) => {
         if (e.key === "Escape") {
            this.closeMenu();
         }
      });
   }

   toggleMenu() {
      this.menu.classList.toggle("open");

      this.body.classList.toggle("menu-open");
   }
   closeMenu() {
      this.menu.classList.remove("open");

      this.body.classList.remove("menu-open");
   }
}

export { HeaderMenu };
