44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useUmami } from "@danielgtmn/umami-react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
export function Navbar() {
|
|
const pathname = usePathname();
|
|
const { track } = useUmami();
|
|
|
|
const navItems = [
|
|
{ label: "Home", path: "/" },
|
|
{ label: "Projects", path: "/projects" },
|
|
{ label: "Blog", path: "/blogs" },
|
|
{ label: "Connect", path: "/contact" },
|
|
];
|
|
|
|
const handleSwitch = (path: string) => {
|
|
track("nav_to_" + path.replaceAll("/", "root"));
|
|
};
|
|
|
|
return (
|
|
<nav className="fixed top-4 left-1/2 z-[100] w-[min(100vw-1rem,460px)] -translate-x-1/2 sm:top-8 sm:w-[min(90%,460px)]">
|
|
<div className="bg-black/20 backdrop-blur-xl border border-white/10 rounded-full px-3 py-2 sm:px-6 sm:py-3 flex items-center justify-between gap-2 sm:gap-4 shadow-2xl">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.path}
|
|
href={item.path}
|
|
onClick={() => handleSwitch(item.path)}
|
|
className={`flex-1 text-center text-xs sm:text-sm font-semibold transition-all duration-300 px-3 py-2 rounded-full
|
|
${
|
|
pathname === item.path
|
|
? "bg-white text-black scale-105 shadow-xl shadow-white/10"
|
|
: "text-gray-400 hover:text-white"
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|