Add user menu with logout in navbar

Replaced the text-based logout button with a user menu using a popover. The menu includes the user's name and a logout option with an icon for better UX. This improves the design and accessibility of the authenticated navbar.

frontend/src/components/layout/navbar.tsx

@@ -6,12 +6,17 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import ThemeToggle from "@/components/ui/theme-toggle";
 import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { User, LogOut } from "lucide-react";
 
 export default function Navbar() {
   const { user, isAuthenticated, logout } = useAuth();
   const pathname = usePathname();
 
-  // Skip rendering navbar on login and public pages
   const hideNavbarOn = ["/login", "/register", "/invite"];
   if (hideNavbarOn.includes(pathname || "")) {
     return null;
@@ -51,14 +56,29 @@ export default function Navbar() {
           <ThemeToggle />
 
           {isAuthenticated ? (
-            <div className="flex items-center gap-3">
-              <span className="text-sm text-muted-foreground">
-                {user?.first_name}
-              </span>
-              <Button variant="ghost" className="px-2" onClick={logout}>
-                Sign out
-              </Button>
-            </div>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline" size="icon">
+                  <User className="h-4 w-4" />
+                  <span className="sr-only">Toggle user menu</span>
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent align="end" className="w-48">
+                <div className="px-2 py-2 flex flex-col">
+                  <span className="mb-2 text-sm font-medium text-muted-foreground">
+                    {user?.first_name} {user?.last_name}
+                  </span>
+                  <Button
+                    variant="ghost"
+                    onClick={logout}
+                    className="justify-start space-x-2 px-2"
+                  >
+                    <LogOut className="h-4 w-4" />
+                    <span>Sign out</span>
+                  </Button>
+                </div>
+              </PopoverContent>
+            </Popover>
           ) : (
             <Button asChild size="sm">
               <Link href="/login">Sign in</Link>