Spaces:
Running
Running
File size: 3,365 Bytes
542c765 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | "use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { motion } from "framer-motion";
interface NavLink {
label: string;
to: string;
icon: string;
}
export function NavLinks({ links }: { links: NavLink[] }) {
const pathname = usePathname();
return (
<nav className="flex flex-col gap-0.5">
{links.map((link) => {
const isActive = pathname === link.to;
return (
<Link
key={link.to}
href={link.to}
className="relative flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-200"
style={{
color: isActive ? "#ffffff" : "rgba(255,255,255,0.38)",
background: isActive
? "rgba(255,153,51,0.12)"
: "transparent",
}}
onMouseEnter={(e) => {
if (!isActive) {
(e.currentTarget as HTMLElement).style.color = "rgba(255,255,255,0.75)";
(e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.05)";
}
}}
onMouseLeave={(e) => {
if (!isActive) {
(e.currentTarget as HTMLElement).style.color = "rgba(255,255,255,0.38)";
(e.currentTarget as HTMLElement).style.background = "transparent";
}
}}
>
{/* Active left glow bar */}
{isActive && (
<motion.span
layoutId="nav-active-bar"
className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 rounded-full"
style={{ background: "#FF9933", boxShadow: "0 0 8px #FF9933" }}
transition={{ type: "spring", stiffness: 400, damping: 35 }}
/>
)}
{/* Icon */}
<span
className="text-base w-6 text-center flex-shrink-0 transition-transform duration-200"
style={{
filter: isActive ? "drop-shadow(0 0 4px rgba(255,153,51,0.5))" : "none",
transform: isActive ? "scale(1.1)" : "scale(1)",
}}
>
{link.icon}
</span>
<span className="truncate">{link.label}</span>
{/* Active dot */}
{isActive && (
<span
className="ml-auto w-1.5 h-1.5 rounded-full flex-shrink-0"
style={{ background: "#FF9933", boxShadow: "0 0 6px #FF9933" }}
/>
)}
</Link>
);
})}
</nav>
);
}
|