fix(header): refactor authentication handling to use Kinde browser client and simplify user state management

app/components/header.tsx

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