user icon to navbar

src/scripts/auth-guard.js

@@ -1,7 +1,81 @@
-(function () {
-    const token = localStorage.getItem("token");
+;(() => {
+    const token = localStorage.getItem("token")
 
     if (!token && window.location.pathname !== "/") {
-        window.location.href = "/";
+        window.location.href = "/"
     }
-})();
+})()
+
+async function loadMeUI() {
+    const token = localStorage.getItem("token")
+    if (!token) return
+
+    try {
+        const res = await fetch("/api/me", {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+        })
+
+        if (!res.ok) return
+
+        const user = await res.json()
+
+        const navUser = document.getElementById("nav-user")
+        const navUsername = document.getElementById("nav-username")
+        const navAvatar = document.getElementById("nav-avatar")
+        const dropdownAvatar = document.getElementById("dropdown-avatar")
+
+        if (!navUser || !navUsername || !navAvatar) return
+
+        navUser.style.display = "flex"
+        navUsername.textContent = user.username
+
+        const avatarUrl = user.avatar || "/public/assets/default-avatar.png"
+        navAvatar.src = avatarUrl
+        if (dropdownAvatar) {
+            dropdownAvatar.src = avatarUrl
+        }
+
+        setupDropdown()
+    } catch (e) {
+        console.error("Failed to load user UI:", e)
+    }
+}
+
+function setupDropdown() {
+    const userAvatarBtn = document.querySelector(".user-avatar-btn")
+    const navDropdown = document.getElementById("nav-dropdown")
+    const navLogout = document.getElementById("nav-logout")
+
+    if (!userAvatarBtn || !navDropdown || !navLogout) return
+
+    userAvatarBtn.addEventListener("click", (e) => {
+        e.stopPropagation()
+        navDropdown.classList.toggle("active")
+    })
+
+    document.addEventListener("click", (e) => {
+        if (!navDropdown.contains(e.target)) {
+            navDropdown.classList.remove("active")
+        }
+    })
+
+    navDropdown.addEventListener("click", (e) => {
+        e.stopPropagation()
+    })
+
+    navLogout.addEventListener("click", () => {
+        localStorage.removeItem("token")
+        window.location.href = "/"
+    })
+
+    const dropdownLinks = navDropdown.querySelectorAll("a.dropdown-item")
+    dropdownLinks.forEach((link) => {
+        link.addEventListener("click", () => {
+            navDropdown.classList.remove("active")
+        })
+    })
+}
+
+loadMeUI()