change navbar: compact t it for better UI and UX

src/components/Navbar.tsx

@@ -1,16 +1,51 @@
-import { useState } from "react"
+import { useState, useEffect, useRef } from "react"
 import { useNavigate } from "react-router-dom"
 import { useTranslation } from "../hooks/useTranslation"
 import { Button } from "./ui/button"
 import { SettingsMenu } from "./SettingsMenu"
-import { LogOut } from "lucide-react"
-import { logoutUser } from "../api/users"
+import { LogOut, User, Moon, Sun, Globe } from "lucide-react"
+import { logoutUser, getUserProfile } from "../api/users"
 import { toast } from "sonner"
 
 export function Navbar() {
-  const { t } = useTranslation()
+  const { t, lang, setLang } = useTranslation()
   const navigate = useNavigate()
   const [showLogoutModal, setShowLogoutModal] = useState(false)
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const [user, setUser] = useState<any>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  
+  const [isDarkMode, setIsDarkMode] = useState(() => 
+    document.documentElement.classList.contains('dark')
+  )
+
+  const isFa = lang === 'fa'
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      const token = localStorage.getItem("accessToken")
+      if (!token) return
+
+      try {
+        const userData = await getUserProfile()
+        setUser(userData)
+      } catch (error) {
+        console.error("Failed to fetch user profile:", error)
+      }
+    }
+
+    fetchUser()
+  }, [])
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsDropdownOpen(false)
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => document.removeEventListener("mousedown", handleClickOutside)
+  }, [])
 
   const handleLogout = async () => {
     try {
@@ -23,33 +58,113 @@ export function Navbar() {
     } finally {
       localStorage.removeItem("accessToken")
       localStorage.removeItem("refreshToken")
+      setUser(null)
       setShowLogoutModal(false)
       toast.success(t.logoutToast || "Successfully logged out!")
       navigate("/login")
     }
   }
 
+  const toggleTheme = () => {
+    const isDark = document.documentElement.classList.toggle('dark')
+    setIsDarkMode(isDark)
+    localStorage.setItem('theme', isDark ? 'dark' : 'light')
+  }
+
+  const toggleLanguage = () => {
+    const newLang = isFa ? 'en' : 'fa'
+    if (setLang) {
+      setLang(newLang)
+    } else {
+      localStorage.setItem('language', newLang)
+      window.location.reload()
+    }
+  }
+
   return (
     <>
       <header className="border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-6 py-4 flex items-center justify-between transition-colors">
-        <div className="flex items-center gap-2">
+        <div 
+          className="flex items-center gap-2 cursor-pointer" 
+          onClick={() => navigate("/")}
+        >
           <div className="w-8 h-8 rounded bg-blue-600 flex items-center justify-center text-white font-bold">
             Q
           </div>
-          <span className="font-bold text-xl tracking-tight text-slate-900 dark:text-slate-50">Qlockify</span>
+          <span className="font-bold text-xl tracking-tight text-slate-900 dark:text-slate-50">
+            Qlockify
+          </span>
         </div>
         
         <div className="flex items-center gap-4">
-          <SettingsMenu />
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => setShowLogoutModal(true)}
-            className="text-red-500 dark:text-red-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/50"
-            title={t.logout || "Logout"}
-          >
-            <LogOut className="h-5 w-5" />
-          </Button>
+          {user ? (
+            <div className="relative" ref={dropdownRef}>
+              <button
+                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                className="w-10 h-10 rounded-full overflow-hidden border-2 border-slate-200 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-500 transition-all focus:outline-none"
+              >
+                {user.profile_picture ? (
+                  <img 
+                    src={user.profile_picture} 
+                    alt="Profile" 
+                    className="w-full h-full object-cover" 
+                  />
+                ) : (
+                  <div className="w-full h-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-sm font-bold text-slate-600 dark:text-slate-300 uppercase">
+                    {user.first_name?.[0] || user.email?.[0] || "U"}
+                  </div>
+                )}
+              </button>
+
+              {isDropdownOpen && (
+                <div className={`absolute ${isFa ? 'left-0' : 'right-0'} mt-2 w-56 rounded-lg bg-white dark:bg-slate-900 shadow-lg ring-1 ring-black ring-opacity-5 border border-slate-200 dark:border-slate-800 z-50 py-2 overflow-hidden`}>
+                  <button 
+                    onClick={() => { navigate("/profile"); setIsDropdownOpen(false); }} 
+                    className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+                  >
+                    <User className="h-4 w-4" />
+                    <span>{t.profile?.title || "Profile"}</span>
+                  </button>
+
+                  <button 
+                    onClick={toggleTheme} 
+                    className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+                  >
+                    {isDarkMode ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+                    <span>{isDarkMode ? (t.lightMode || "Light Mode") : (t.darkMode || "Dark Mode")}</span>
+                  </button>
+
+                  <button 
+                    onClick={toggleLanguage} 
+                    className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+                  >
+                    <Globe className="h-4 w-4" />
+                    <span>{isFa ? "English" : "فارسی"}</span>
+                  </button>
+
+                  <div className="h-px bg-slate-200 dark:bg-slate-800 my-1"></div>
+                  
+                  <button 
+                    onClick={() => { setShowLogoutModal(true); setIsDropdownOpen(false); }} 
+                    className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-red-600 dark:text-red-500 hover:bg-red-50 dark:hover:bg-red-950/50 transition-colors font-medium"
+                  >
+                    <LogOut className="h-4 w-4" />
+                    <span>{t.logout || "Logout"}</span>
+                  </button>
+                </div>
+              )}
+            </div>
+          ) : (
+            <>
+              <SettingsMenu />
+              <Button 
+                onClick={() => navigate("/login")}
+                className="bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
+              >
+                {t.login?.signIn || "Login"}
+              </Button>
+            </>
+          )}
         </div>
       </header>
 

src/locales/en.ts

@@ -100,4 +100,6 @@ export const en = {
   confirmLogoutTitle: "Confirm Logout",
   confirmLogoutMessage: "Are you sure you want to log out of your account?",
   cancel: "Cancel",
+  lightMode: "Light Mode",
+  darkMode: "Dark Mode",
 }

src/locales/fa.ts

@@ -101,4 +101,7 @@ export const fa = {
   confirmLogoutTitle: "تایید خروج",
   confirmLogoutMessage: "آیا مطمئن هستید که می‌خواهید از حساب خود خارج شوید؟",
   cancel: "لغو",
+  lightMode: "حالت روشن",
+  darkMode: "حالت تاریک",
+
 }