50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { motion } from "framer-motion";
|
|
|
|
interface MenuContentProps {
|
|
navigation: { title: string; path: string }[];
|
|
activeSection: string;
|
|
handleNavigation: (path: string) => void;
|
|
}
|
|
|
|
const MenuContent = ({
|
|
navigation,
|
|
activeSection,
|
|
handleNavigation,
|
|
}: MenuContentProps) => {
|
|
return (
|
|
<ul className="flex items-center gap-8">
|
|
{navigation.map((item, idx) => {
|
|
const isActive = activeSection === item.path;
|
|
return (
|
|
<li key={idx}>
|
|
<motion.a
|
|
href={item.path}
|
|
className="relative block text-sm font-medium tracking-wide"
|
|
animate={{ color: isActive ? "#ffffff" : "rgba(255,255,255,0.55)" }}
|
|
whileHover={{ color: "#ffffff" }}
|
|
whileTap={{ scale: 0.95 }}
|
|
transition={{ type: "spring", stiffness: 400, damping: 25 }}
|
|
aria-current={isActive ? "page" : undefined}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
handleNavigation(item.path);
|
|
}}
|
|
>
|
|
{item.title}
|
|
{isActive && (
|
|
<motion.span
|
|
layoutId="desktop-nav-underline"
|
|
className="absolute -bottom-1.5 left-0 h-px w-full rounded-full bg-gold-light"
|
|
transition={{ type: "spring", stiffness: 380, damping: 32 }}
|
|
/>
|
|
)}
|
|
</motion.a>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
);
|
|
};
|
|
|
|
export default MenuContent;
|