✨ feat: user profile in navbar

shared/widgets/navbar/components/Navbar.tsx

@@ -2,8 +2,12 @@
 import Image from "next/image";
 import NavigationLink from "./NavigationLink";
 import SignIn from "./SignIn";
+import { useAuth } from "@/shared/contexts/AuthContext";
+import UserProfile from "./UserProfile";
 
 const Navbar = () => {
+  const { session } = useAuth();
+
   return (
     <div className="absolute z-10 top-0 w-full h-16 flex items-center justify-between">
       <div className="flex items-center">
@@ -16,9 +20,7 @@ const Navbar = () => {
         />
         <NavigationLink />
       </div>
-      <div>
-        <SignIn />
-      </div>
+      <div>{session?.user ? <UserProfile /> : <SignIn />}</div>
     </div>
   );
 };

shared/widgets/navbar/components/UserProfile.tsx

@@ -0,0 +1,85 @@
+import { useAuth } from "@/shared/contexts/AuthContext";
+import { Avatar, AvatarImage } from "@/shared/libs/shadcn/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/shared/libs/shadcn/ui/dropdown-menu";
+import {
+  Bookmark,
+  CircleUserRound,
+  ClockFading,
+  LifeBuoy,
+  LogOut,
+  MessagesSquare,
+  Settings,
+  Webhook,
+} from "lucide-react";
+
+const UserProfile = () => {
+  const { session } = useAuth();
+  return (
+    <div className="h-full flex items-center">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Avatar size="lg" className="cursor-pointer">
+            <AvatarImage
+              className="rounded-md"
+              src={session?.user?.avatar}
+              alt={session?.user?.name}
+            />
+          </Avatar>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-38">
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Account</DropdownMenuLabel>
+            <DropdownMenuItem>
+              <CircleUserRound />
+              My Profile
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <ClockFading />
+              Activity
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Bookmark />
+              Bookmark
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Settings />
+              Settings
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <MessagesSquare />
+              Forum
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <LifeBuoy />
+              Help
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Webhook />
+              API
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem variant="destructive">
+              <LogOut />
+              Log Out
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+export default UserProfile;