window.addEventListener("DOMContentLoaded", () => {
  let firstTime = window.location.pathname != "/" && window.pageYOffset < 800;
  const toggleArrow = document.querySelector("#harr");
  const hid = document.querySelector("#hid");
  const initValue = document.body.style.getPropertyValue("--width_panel_bis");

  toggleArrow.addEventListener("click", () => {
    if (toggleArrow.classList.contains("hide_arrow_off")) {
      firstTime = false;
      showAbout();
      showHID();
      setTimeout(() => {
        toggleArrow.classList.remove("hide_arrow_off");
      }, 1000);
    } else {
      toggleArrow.classList.add("hide_arrow_off");
      hideAbout();

      // If the screen is smaller than 500px, hide the HID
      if (window.screen.availWidth <= 500) {
        hideHID();
      }
    }
  });

  function hideAbout() {
    document.body.style.setProperty("--width_panel_bis", "0px");
  }

  function showAbout() {
    document.body.style.setProperty("--width_panel_bis", initValue);
  }

  function hideHID() {
    hid.style.setProperty("display", "none");
  }

  function showHID() {
    hid.style.setProperty("display", "");
  }

  window.addEventListener("scroll", () => {
    if (!toggleArrow) return;
    if (window.pageYOffset >= 800) {
      if (
        firstTime &&
        document.body.style.getPropertyValue("--width_panel_bis") === initValue
      ) {
        toggleArrow.click();
        firstTime = true;
      }

      toggleArrow.classList.add("hide_arrow_show");
      // A hideAbout(header, articles);
    } else if (!toggleArrow.classList.contains("hide_arrow_off")) {
      // A showAbout(header, articles);
      toggleArrow.classList.remove("hide_arrow_show");
    }

    if (
      firstTime &&
      window.pageYOffset === 0 &&
      document.body.style.getPropertyValue("--width_panel_bis") !== initValue
    ) {
      toggleArrow.click();
      firstTime = true;
    }
  });
});