pushing Hero down a bit and adding active states in routed links

This commit is contained in:
ajaythapliyal
2023-02-24 16:41:58 +05:30
parent d1d478ea29
commit 9d13034b7a
3 changed files with 12 additions and 3 deletions

View File

@@ -59,7 +59,11 @@ export default function Navigation({
</div>
<NavLink
to={'/'}
className="my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
className={({ isActive }) =>
`${
isActive ? 'bg-gray-3000' : ''
} my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100`
}
>
<img src={Message} className="ml-2 w-5"></img>
<p className="my-auto text-eerie-black">Chat</p>
@@ -94,7 +98,11 @@ export default function Navigation({
<div className="flex h-48 flex-col border-b-2 border-gray-100">
<NavLink
to="/about"
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
className={({ isActive }) =>
`my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100 ${
isActive ? 'bg-gray-3000' : ''
}`
}
>
<img src={Info} alt="info" className="ml-2 w-5" />
<p className="my-auto text-eerie-black">About</p>