document.addEventListener("DOMContentLoaded", function () { const btn = document.querySelector(".menu-btn"); if (!btn) return; btn.addEventListener("click", function () { btn.classList.toggle("active"); console.log("clicked"); // debug check }); }); document.addEventListener("click", function (e) { const wrapper = document.querySelector(".nav-wrapper"); const btn = e.target.closest(".menu-btn"); const menu = e.target.closest(".nav-menu"); const dropdowns = document.querySelectorAll(".custom-dropdown"); if (!wrapper) return; dropdowns.forEach(dropdown => { if (dropdown.getAttribute("data-state") === "open") { dropdown.setAttribute("data-state", "closed"); } }); // If clicking hamburger button → toggle if (btn) { const state = wrapper.getAttribute("data-state"); wrapper.setAttribute("data-state", state === "open" ? "closed" : "open"); return; } // If clicking inside menu -> DO NOTHING if (menu) return; // If clicking outside → close wrapper.setAttribute("data-state", "closed"); });