41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
|
import { NavLink } from "react-router-dom";
|
||
|
|
import { useNavItem } from "./useNavItem";
|
||
|
|
|
||
|
|
export default function Navigation() {
|
||
|
|
const { navItems } = useNavItem()
|
||
|
|
return <nav className="mt-4 rounded-lg bg-[#0B1A32]/90">
|
||
|
|
<div className="flex items-center justify-between px-6 py-1">
|
||
|
|
<div className="flex space-x-1">
|
||
|
|
{navItems.map((item) => (
|
||
|
|
<NavLink
|
||
|
|
key={item.to}
|
||
|
|
to={item.to}
|
||
|
|
className={({ isActive }) => `
|
||
|
|
group relative px-4 py-3
|
||
|
|
transition-all duration-300 ease-out
|
||
|
|
|
||
|
|
${isActive ? 'text-white font-medium' : 'text-[#8EADD4]'}
|
||
|
|
`}
|
||
|
|
>
|
||
|
|
{({ isActive }) => (
|
||
|
|
<>
|
||
|
|
<span className="relative z-10 transition-colors group-hover:text-white">
|
||
|
|
{item.label}
|
||
|
|
</span>
|
||
|
|
<span className={`
|
||
|
|
absolute bottom-1.5 left-1/2 h-[2px] bg-white
|
||
|
|
transition-all duration-300 ease-out
|
||
|
|
transform -translate-x-1/2
|
||
|
|
${isActive
|
||
|
|
? 'w-12 opacity-100'
|
||
|
|
: 'w-0 opacity-0 group-hover:w-8 group-hover:opacity-50'
|
||
|
|
}
|
||
|
|
`} />
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</NavLink>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
}
|