53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import { NavLink } from "react-router-dom";
|
|
import { useNavItem } from "./useNavItem";
|
|
|
|
interface NavigationProps {
|
|
className?: string;
|
|
}
|
|
|
|
export default function Navigation({ className }: NavigationProps) {
|
|
const { navItems } = useNavItem();
|
|
|
|
return (
|
|
<nav className={`mt-4 rounded-lg bg-[#0B1A32]/90 ${className}`}>
|
|
<div className="flex flex-col md:flex-row items-stretch">
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex items-center px-6 py-1 w-full overflow-x-auto scrollbar-thin scrollbar-thumb-[#00308F] scrollbar-track-transparent">
|
|
<div className="flex space-x-4 min-w-max">
|
|
{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 flex items-center gap-2">
|
|
|
|
{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>
|
|
</div>
|
|
</nav>)
|
|
}
|