feat(social): update navbar

apps/social/src/app/components/navbar.tsx

@@ -1,29 +1,69 @@
 import Link from "next/link";
+import Image from "next/image";
 import { logout } from "@/actions";
+import logo from "/public/logo.svg";
 import { getSession } from "@/lib/auth";
 import { SignOutButton } from "./sign-out-btn";
-import { Button } from "@umamin/ui/components/button";
+import { ArrowLeft, ScanFace } from "lucide-react";
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@umamin/ui/components/avatar";
+
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@umamin/ui/components/dropdown-menu";
 
 export async function Navbar() {
-  const { session } = await getSession();
+  const { user, session } = await getSession();
 
   return (
-    <nav className="py-5 container md:px-0 flex justify-between items-center max-w-lg">
-      <Link href="/" aria-label="logo">
-        <span className="text-muted-foreground font-medium">social.</span>
-        <span className="font-semibold text-foreground">umamin</span>
-        <span className="text-muted-foreground font-medium">.link</span>
+    <nav className="py-3 container md:px-0 grid grid-cols-3 items-center w-full max-w-lg bg-opacity-95 bg-bg backdrop-blur-3xl fixed top-0 left-0 right-0 z-50">
+      <Link href="/" aria-label="back">
+        <ArrowLeft />
+      </Link>
+      <Link
+        href="/"
+        aria-label="logo"
+        className="place-self-center text-[10vw] leading-none dark:bg-gradient-to-b from-foreground dark:to-zinc-400 bg-clip-text bg-zinc-800 text-transparent tracking-tighter text-center"
+      >
+        <Image src={logo} alt="logo" height={50} />
       </Link>
 
-      {session ? (
-        <form action={logout}>
-          <SignOutButton />
-        </form>
-      ) : (
-        <Button asChild type="submit" variant="outline">
-          <Link href="/login">Login</Link>
-        </Button>
-      )}
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger
+          title="post menu"
+          className="place-self-end self-center"
+        >
+          <Avatar>
+            <AvatarImage src={user?.imageUrl ?? undefined} alt="User avatar" />
+            <AvatarFallback>
+              <ScanFace />
+            </AvatarFallback>
+          </Avatar>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="font-semibold [&>*]:cursor-pointer [&>*]:border-b [&>*]:last:border-0 mr-4">
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            {session ? (
+              <form action={logout} className="place-self-end">
+                <SignOutButton />
+              </form>
+            ) : (
+              <Link href="/login" className="place-self-end">
+                Login
+              </Link>
+            )}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </nav>
   );
 }

apps/social/src/app/components/sign-out-btn.tsx

@@ -2,20 +2,14 @@
 
 import { Loader2 } from "lucide-react";
 import { useFormStatus } from "react-dom";
-import { Button } from "@umamin/ui/components/button";
 
 export function SignOutButton() {
   const { pending } = useFormStatus();
 
   return (
-    <Button
-      data-testid="logout-btn"
-      type="submit"
-      disabled={pending}
-      variant="outline"
-    >
+    <button data-testid="logout-btn" type="submit" disabled={pending}>
       {pending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
       Sign Out
-    </Button>
+    </button>
   );
 }