let dropdowns = document.getElementsByClassName("dropdown");
let i;

for (i = 0; i < dropdowns.length; i++) {
  dropdowns[i].addEventListener("click", function () {
    this.classList.toggle("active");

    let dropdownContent = this.nextElementSibling;

    dropdownContent.classList.toggle("active");
  });
}

const overlay = document.getElementById("overlay");
const sidebar = document.getElementById("sidebar");
document.getElementById("i-moon").addEventListener("click", function () {
  document.body.classList.toggle("dark");
});

overlay.addEventListener("click", function () {
  sidebar.classList.toggle("active");
  overlay.classList.toggle("active");
});

document.getElementById("toggle").addEventListener("click", function () {
  sidebar.classList.toggle("active");
  overlay.classList.toggle("active");
});

document.getElementById("close").addEventListener("click", function () {
  sidebar.classList.toggle("active");
  overlay.classList.toggle("active");
});

function dropdownclick(e) {
  e.stopPropagation();
}

let dropdown__wrappers = document.getElementsByClassName("dropdown__wrapper");
let j;

// Add click event listeners to each dropdown wrapper
for (let j = 0; j < dropdown__wrappers.length; j++) {
  dropdown__wrappers[j].addEventListener("click", function (event) {
    event.stopPropagation(); // Stop event propagation to prevent body click handler from being triggered

    // Remove "active" class from all dropdown__wrappers elements except the clicked one
    for (let k = 0; k < dropdown__wrappers.length; k++) {
      if (k !== j) {
        dropdown__wrappers[k].classList.remove("active");
      }
    }

    this.classList.toggle("active");

    // Toggle "active" class for the dropdown menu associated with the clicked dropdown wrapper
    let dropdownContent = this.querySelector(".dropdown_menu");
    dropdownContent.classList.toggle("active");
  });
}

document.body.addEventListener("click", function () {
  // Remove "active" class from all dropdown__wrappers elements
  for (let k = 0; k < dropdown__wrappers.length; k++) {
    dropdown__wrappers[k].classList.remove("active");
  }
});