refactor: implement server-side rendering for auth-dependent pages

1 files changed, 9 insertions, 74 deletions

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f75e6ed..e8f4138 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,31 +1,14 @@
-"use client"
-
 import Link from "next/link"
-import { useSession, signOut } from "next-auth/react"
+import { getServerSession } from "next-auth"
+import { LogIn } from "lucide-react"
+
 import { Button } from "@/components/ui/button"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { LogIn, Settings, LogOut } from "lucide-react"
 import { ThemeToggle } from "@/components/ThemeToggle"
+import { UserNav } from "@/components/UserNav"
+import { authOptions } from "@/lib/auth"
 
-export default function Navbar() {
-  const { data: session, status } = useSession()
-
-  const getInitials = (name: string) => {
-    return name
-      .split(' ')
-      .map(word => word[0])
-      .join('')
-      .toUpperCase()
-      .slice(0, 2)
-  }
+export default async function Navbar() {
+  const session = await getServerSession(authOptions)
 
   return (
     <nav className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -39,56 +22,8 @@ export default function Navbar() {
         
         <div className="flex items-center space-x-4">
           <ThemeToggle />
-          {status === "loading" ? (
-            <div className="flex items-center space-x-2">
-              <div className="w-16 h-4 bg-muted animate-pulse rounded hidden sm:block" />
-              <div className="w-8 h-8 rounded-full bg-muted animate-pulse" />
-            </div>
-          ) : session ? (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="relative h-10 w-auto px-2 rounded-full">
-                  <div className="flex items-center space-x-2">
-                    <span className="text-sm font-medium hidden sm:block">
-                      {session.user?.name}
-                    </span>
-                    <Avatar className="h-8 w-8">
-                      <AvatarImage src={session.user?.image || ""} alt={session.user?.name || ""} />
-                      <AvatarFallback className="text-xs">
-                        {session.user?.name ? getInitials(session.user.name) : "U"}
-                      </AvatarFallback>
-                    </Avatar>
-                  </div>
-                </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">
-                      {session.user?.name}
-                    </p>
-                    <p className="text-xs leading-none text-muted-foreground">
-                      {session.user?.email}
-                    </p>
-                  </div>
-                </DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem asChild>
-                  <Link href="/settings" className="w-full cursor-pointer">
-                    <Settings className="mr-2 h-4 w-4" />
-                    Settings
-                  </Link>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem 
-                  className="cursor-pointer text-destructive hover:text-destructive focus:text-destructive"
-                  onClick={() => signOut()}
-                >
-                  <LogOut className="mr-2 h-4 w-4 text-destructive" />
-                  Log out
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+          {session?.user ? (
+            <UserNav user={session.user} />
           ) : (
             <Button asChild>
               <Link href="/login">