const fixedMenuBtn = document.getElementById("fixedMenuButtonId");
const productHeaderList = document.getElementById("hd-productId");
const productContainer = document.getElementById("productMenuContainerId");

let fixedMenuKeyTotal = 0;
fixedMenuBtn.addEventListener("click", () => {
  fixedMenuKeyTotal++;
  console.log(fixedMenuKeyTotal);
  if (fixedMenuKeyTotal % 2 == 0) {
    document.getElementById("fixedMenuContainerId").style.left = "-150px";
    document.getElementById("lineDrawHeaderId").textContent = "MENU";
  } else {
    document.getElementById("fixedMenuContainerId").style.left = "0%";
    document.getElementById("lineDrawHeaderId").textContent = "CLOSE";
  }
});

document.addEventListener("keydown", function (e) {
  if (e.key === "Escape") {
    const menuButton = document.getElementById("fixedMenuContainerId");

    if (menuButton || productContainer) {
      menuButton.style.left = "-150px";
      document.getElementById("lineDrawHeaderId").textContent = "MENU";
      productContainer.style.top = "-300%";
      fixedMenuKeyTotal = 0;
    }
  }
});

productHeaderList.addEventListener("click", () => {
  productContainer.style.top = "0";
  document.getElementById("fixedMenuContainerId").style.left = "-150px";
  document.getElementById("lineDrawHeaderId").textContent = "MENU";
  fixedMenuKeyTotal = 0;
});

document.getElementById("menuCloseBtnId").addEventListener("click", () => {
  productContainer.style.top = "-300%";
});