navbar-perspolis/Theme/assets/js/main.js

//////////////////////////////////////////// open and close mobile navbar
document.querySelectorAll(".open-modal").forEach(btn => {
  btn.addEventListener("click", e => {
    e.preventDefault();
    const target = btn.getAttribute("data-modal-target");
    const modal = document.getElementById(target);
    const content = modal.querySelector(".modal-content");
    const svg = btn.querySelector("svg");

    if (!modal.classList.contains("hidden")) {
      content.classList.add("translate-y-[-125%]");
      content.classList.remove("translate-y-0");
      if (svg) {
        svg.classList.remove("rotate-180");
        svg.classList.add("rotate-0");
      }
      setTimeout(() => modal.classList.add("hidden"), 500);
      return;
    }

    modal.classList.remove("hidden");
    setTimeout(() => {
      content.classList.remove("translate-y-[-125%]");
      content.classList.add("translate-y-0");
    }, 10);

    if (svg) {
      svg.classList.remove("rotate-0");
      svg.classList.add("rotate-180");
    }
  });
});

// close button
document.querySelectorAll(".close-modal").forEach(btn => {
  btn.addEventListener("click", () => {
    const modal = btn.closest(".modal");
    const content = modal.querySelector(".modal-content");

    content.classList.add("translate-y-[-125%]");
    content.classList.remove("translate-y-0");

    const target = modal.id;
    document.querySelectorAll(`[data-modal-target="${target}"]`).forEach(trigger => {
      const svg = trigger.querySelector("svg");
      if (svg) {
        svg.classList.remove("rotate-180");
        svg.classList.add("rotate-0");
      }
    });

    setTimeout(() => modal.classList.add("hidden"), 500);
  });
});

document.addEventListener("click", e => {
  document.querySelectorAll(".modal").forEach(modal => {
    if (!modal.classList.contains("hidden")) {
      const content = modal.querySelector(".modal-content");
      const target = modal.id;
      const triggers = document.querySelectorAll(`[data-modal-target="${target}"]`);

      if (!content.contains(e.target) && !Array.from(triggers).includes(e.target.closest("[data-modal-target]"))) {
        content.classList.add("translate-y-[-125%]");
        content.classList.remove("translate-y-0");

        triggers.forEach(trigger => {
          const svg = trigger.querySelector("svg");
          if (svg) {
            svg.classList.remove("rotate-180");
            svg.classList.add("rotate-0");
          }
        });
        setTimeout(() => modal.classList.add("hidden"), 500);
      }
    }
  });
});
///////////////////////////////////////// language in header
const langBtn = document.getElementById('langBtn');
const en = document.getElementById('enTag');
const arrow = langBtn.querySelectorAll('svg')[1];
let expanded = false;

function toggleLang() {
  expanded = !expanded;

  if (expanded) {
    langBtn.classList.add('py-3.5');
    langBtn.classList.remove('py-2.5');

    en.classList.remove('opacity-0', 'translate-y-1', 'scale-95', 'pointer-events-none', 'h-0');
    en.classList.add('opacity-100', 'translate-y-0', 'scale-100', 'pointer-events-auto', 'h-auto');

    langBtn.setAttribute('aria-pressed', 'true');

    arrow.classList.remove('rotate-0');
    arrow.classList.add('rotate-180', 'transition-transform', 'duration-300', 'ease-in-out');
  } else {
    langBtn.classList.add('py-2.5');
    langBtn.classList.remove('py-3.5');

    en.classList.remove('opacity-100', 'translate-y-0', 'scale-100', 'pointer-events-auto', 'h-auto');
    en.classList.add('opacity-0', 'translate-y-1', 'scale-95', 'pointer-events-none', 'h-0');

    langBtn.setAttribute('aria-pressed', 'false');

    // reset svg rotation
    arrow.classList.remove('rotate-180');
    arrow.classList.add('rotate-0');
  }
}

langBtn.addEventListener('click', toggleLang);
langBtn.addEventListener('keydown', (e) => {
  if (e.key === ' ' || e.key === 'Enter') {
    e.preventDefault();
    toggleLang();
  }
});
//////////////////////////////////// menu mobile
var menus = document.querySelectorAll('.menu');
var onClick = function(){
  this.classList.toggle('open');
}
menus.forEach(function(menu, index){
  menu.addEventListener('click', onClick);
});
const toggles = document.querySelectorAll('.menu-toggle');

toggles.forEach(toggle => {
  toggle.addEventListener('click', (e) => {
    e.preventDefault();
    const icon = toggle.querySelector('.menu-icon');
    const submenu = toggle.nextElementSibling;

    toggles.forEach(t => {
      const ic = t.querySelector('.menu-icon');
      const sm = t.nextElementSibling;
      if(t !== toggle){
        ic.classList.remove('rotate-180');
        sm.style.maxHeight = '0';
      }
    });

    icon.classList.toggle('rotate-180');
    if(submenu.style.maxHeight && submenu.style.maxHeight !== '0px'){
      submenu.style.maxHeight = '0';
    } else {
      submenu.style.maxHeight = submenu.scrollHeight + 'px';
    }
  });
});