fix(header): refactor authentication handling to use server session and update login state management

app/components/header.tsx

@@ -1,9 +1,6 @@
-"use client";
-
 import Link from "next/link";
 import Image from "next/image";
-import { LoginLink, LogoutLink, RegisterLink } from "@kinde-oss/kinde-auth-nextjs/server";
-import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
+import { getKindeServerSession, LoginLink, LogoutLink, RegisterLink } from "@kinde-oss/kinde-auth-nextjs/server";
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -48,9 +45,10 @@ const userMenuItems = [
   },
 ];
 
-export default function Header() {
-  const { isAuthenticated, getUser } = useKindeBrowserClient();
-  const user = getUser();
+export default async function Header() {
+  const { isAuthenticated, getUser } = getKindeServerSession();
+  const isLoggedIn = await isAuthenticated();
+  const user = isLoggedIn ? await getUser() : null;
 
   return (
     <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -86,7 +84,7 @@ export default function Header() {
         </div>
 
         <div className="flex items-center gap-4">
-          {isAuthenticated ? (
+          {isLoggedIn ? (
             <>
               <NavigationMenu className="hidden md:flex">
                 <NavigationMenuList>
@@ -178,7 +176,7 @@ export default function Header() {
                   </Link>
                 ))}
 
-                {isAuthenticated ? (
+                {isLoggedIn ? (
                   <>
                     <div className="border-t pt-4">
                       <div className="flex items-center space-x-2 mb-4">