How can I style the page title in my nav bar when I am on the selected path? I am using React and Tailwind CSS. For example, I want the title to turn yellow when I am on the current page.
Here is the logic I have tried, but it doesn't seem to be working:
<div className={active ? "text-yellow-400" : undefined}
This is my route code:
const LinkItem = ({href, path, children, ...props}) => {
const active = path === href
return (
<NextLink href={href}>
<div className={active ? "text-yellow-400" : undefined}
{...props}
>
{children}
</div>
</NextLink>
)
}
Below is the code for my nav bar:
const Navbar = props => {
const {path} = props
return (
<LinkItem href="/page1" path={path}>
Page 1
</LinkItem>
)
}