import Link from 'next/link';
import React from 'react'
import { BsListCheck } from "react-icons/bs";
import SignInButton from './SignInButton';

const NavBar = () => {
    const links = [
        {name:"Home", destination:"/"},
        {name:"Dashboard", destination:"/dashboard"},
    ]
    return (
        <nav className='h-11 border-b border-emerald-400 flex space-x-8 items-center px-5 mb-3 justify-between'>
            <ul className='flex space-x-6 items-center'>
                <li key="Logo"><Link href="/"><BsListCheck /></Link></li>
                {links.map(link =>
                    <li key={link.name}><Link href={link.destination}>{link.name}</Link></li>
                )}
            </ul>
            <SignInButton></SignInButton>
        </nav>
    )
}

export default NavBar

I want to not include the dashboard link if the user is defined, however i would need to access the zustand store which can only be done in a client component so i have two options:
1. convert the navbar into a client component
2. extract the dashboard link into it's own component and make that a client component
are there any other good ways of doing this?
which method is better if not?

What if i wanted the dashboard page to display an error message if user isnt defined? would i have to make the whole page a client component?