hic-et-nunc/assets/js/project-toggle.js

const allProjects = document.querySelectorAll(".projects-index li");

function selectProject(slug) {
  if (!slug) {
    allProjects.forEach((p) => p.classList.remove("selected", "unselected"));
    return;
  }
  const target = [...allProjects].find((p) => p.dataset.slug === slug);
  if (!target) return;
  allProjects.forEach((p) => {
    p.classList.add("unselected");
    p.classList.remove("selected");
  });
  target.classList.add("selected");
  target.classList.remove("unselected");
}

allProjects.forEach((project) => {
  project.addEventListener("click", () => {
    allProjects.forEach((p) => {
      p.classList.add("unselected");
      p.classList.remove("selected");
    });
    project.classList.add("selected");
    project.classList.remove("unselected");
    Router.setParam("project", project.dataset.slug);
  });
});

const projectTogglers = document.querySelectorAll(".project-toggler");

projectTogglers.forEach((button) => {
  button.addEventListener("click", (event) => {
    const parentLi = button.closest("li");
    if (parentLi.classList.contains("selected")) {
      event.stopPropagation();
      allProjects.forEach((p) => p.classList.remove("unselected"));
      parentLi.classList.remove("selected");
      Router.setParam("project", null);
    }
  });
});

const allProjectsCloser = document.querySelector(".all-projects-closer");

allProjectsCloser.addEventListener("click", () => {
  allProjects.forEach((p) => p.classList.remove("selected", "unselected"));
  Router.setParam("project", null);
});

window.addEventListener("routechange", () => selectProject(Router.getParam("project")));

selectProject(Router.getParam("project"));