feat: Update AudioPlayer and LyricSearch components for improved functionality and user experience

public/scripts/nav-controls.js

@@ -0,0 +1,84 @@
+(function () {
+  const scriptEl = document.currentScript;
+  const API_URL = scriptEl?.dataset?.apiUrl;
+
+  window.toggleTheme = () => {
+    const currentTheme = document.documentElement.getAttribute("data-theme");
+    const newTheme = currentTheme === "dark" ? "light" : "dark";
+    document.dispatchEvent(new CustomEvent("set-theme", { detail: newTheme }));
+  };
+
+  window.handleLogout = async () => {
+    try {
+      await fetch(`${API_URL}/auth/logout`, {
+        method: "POST",
+        credentials: "include",
+      });
+    } catch (error) {
+      console.error("Logout failed", error);
+    } finally {
+      window.location.href = "/";
+    }
+  };
+
+  function initMobileMenu() {
+    const menuBtn = document.getElementById("mobile-menu-btn");
+    const mobileMenu = document.getElementById("mobile-menu");
+    const menuIcon = document.getElementById("menu-icon");
+    const closeIcon = document.getElementById("close-icon");
+
+    if (!menuBtn || !mobileMenu || !menuIcon || !closeIcon) {
+      return;
+    }
+
+    const newMenuBtn = menuBtn.cloneNode(true);
+    menuBtn.parentNode.replaceChild(newMenuBtn, menuBtn);
+
+    newMenuBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const isOpen = mobileMenu.classList.contains("open");
+
+      if (isOpen) {
+        mobileMenu.classList.remove("open");
+        menuIcon.style.display = "block";
+        closeIcon.style.display = "none";
+      } else {
+        mobileMenu.classList.add("open");
+        menuIcon.style.display = "none";
+        closeIcon.style.display = "block";
+      }
+    });
+
+    const mobileLinks = mobileMenu.querySelectorAll("a");
+    mobileLinks.forEach((link) => {
+      link.addEventListener("click", () => {
+        mobileMenu.classList.remove("open");
+        menuIcon.style.display = "block";
+        closeIcon.style.display = "none";
+      });
+    });
+
+    const closeHandler = (e) => {
+      if (!mobileMenu.contains(e.target) && !newMenuBtn.contains(e.target)) {
+        if (mobileMenu.classList.contains("open")) {
+          mobileMenu.classList.remove("open");
+          menuIcon.style.display = "block";
+          closeIcon.style.display = "none";
+        }
+      }
+    };
+
+    document.removeEventListener("click", closeHandler);
+    document.addEventListener("click", closeHandler);
+  }
+
+  const ready = () => initMobileMenu();
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", ready, { once: true });
+  } else {
+    ready();
+  }
+
+  document.addEventListener("astro:page-load", initMobileMenu);
+})();