Made the user-nav functional

src/app/_components/user-nav.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useSession } from "next-auth/react";
+import { useSession, signOut } from "next-auth/react";
 import {
   Avatar,
   AvatarFallback,
@@ -10,60 +10,44 @@ import { Button } from "~/app/_components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-  DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "~/app/_components/ui/dropdown-menu";
 
 export function UserNav() {
   const session = useSession();
 
+  const profilePic = session.data?.user.image ?? undefined;
+  const name = session.data?.user.name;
+  const email = session.data?.user.email;
+
+  const handleLogout = () => signOut();
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="relative h-8 w-8 rounded-full">
           <Avatar className="h-9 w-9">
-            <AvatarImage
+            <AvatarImage src={profilePic} alt="user's profile picture" />
-              src={session.data?.user.image ?? undefined}
+            <AvatarFallback>{name?.charAt(0)}</AvatarFallback>
-              alt="user's profile picture"
-            />
-            <AvatarFallback>ls</AvatarFallback>
           </Avatar>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56" align="end" forceMount>
         <DropdownMenuLabel className="font-normal">
           <div className="flex flex-col space-y-1">
-            <p className="text-sm font-medium leading-none">shadcn</p>
+            {name && <p className="text-sm font-medium leading-none">{name}</p>}
+            {email && (
               <p className="text-muted-foreground text-xs leading-none">
-              m@example.com
+                {email}
               </p>
+            )}
           </div>
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        <DropdownMenuGroup>
+        <DropdownMenuItem onClick={handleLogout}>Log out</DropdownMenuItem>
-          <DropdownMenuItem>
-            Profile
-            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            Billing
-            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            Settings
-            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>New Team</DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          Log out
-          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );