fix: get current user server side in navbar. fix: adjust breadcump styling on account component

src/app/account/[[...account]]/page.tsx

@@ -12,6 +12,7 @@ export default function AccountPage() {
             navbar: 'dark:bg-secondary-gray [&_*]:dark:text-white',
             formFieldInput: 'dark:bg-primary-gray dark:text-white',
             profileSectionTitle: 'dark:border-white dark:border-opacity-10',
+            breadcrumbsItem: 'dark:text-white',
           },
         }}
       />

src/app/profile/[id]/page.tsx

@@ -0,0 +1,8 @@
+export default async function UserProfilePage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  // TODO: Profile page. Display profile and user's post
+  return <h1>{params.id}</h1>;
+}

src/components/Navbar.tsx

@@ -1,10 +1,11 @@
-import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs';
+import { SignedIn, SignedOut, UserButton, currentUser } from '@clerk/nextjs';
 import Link from 'next/link';
 import { BiSolidMessageSquareAdd } from 'react-icons/bi';
-import ProfileLink from './ProfileLink';
 import ThemeButton from './ThemeButton';
 
-export default function Navbar() {
+export default async function Navbar() {
+  const user = await currentUser();
+
   return (
     <nav className='flex items-center justify-between p-5 shadow-md dark:bg-secondary-gray'>
       <ul className='flex items-center gap-4'>
@@ -31,7 +32,7 @@ export default function Navbar() {
             <Link href='#'>Following</Link>
           </li>
           <li>
-            <ProfileLink />
+            <Link href={`/profile/${user?.id}`}>Profile</Link>
           </li>
           <li>
             <Link

src/components/ProfileLink.tsx

@@ -1,14 +0,0 @@
-'use client';
-
-import { useUser } from '@clerk/nextjs';
-import Link from 'next/link';
-
-export default function ProfileLink() {
-  const user = useUser();
-
-  if (user.isSignedIn !== true) {
-    return <span>Profile</span>;
-  }
-
-  return <Link href={`/profile/${user.user.id}`}>Profile</Link>;
-}