64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import { Dot } from "lucide-react";
|
|
|
|
interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
|
|
items: SidebarNavItem[];
|
|
}
|
|
|
|
export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
|
|
const pathname = usePathname();
|
|
|
|
const primaryItem = (item: SidebarNavItem) => {
|
|
return <Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
buttonVariants({ variant: "primary" }),
|
|
pathname === item.href ? "bg-muted shadow-xl" : "",
|
|
"w-fit justify-start rounded-full text-sm sm:text-xl text-normal text-white bg-yellow-500 hover:bg-yellow-400"
|
|
)}
|
|
>
|
|
<span className="mr-2">{item.icon}</span>
|
|
{item.title}
|
|
</Link>
|
|
}
|
|
|
|
return (
|
|
<nav
|
|
className={cn(
|
|
"max-w-[220px] mx-auto hidden md:flex space-x-2 justify-between px-4 sm:justify-evenly md:justify-start md:flex-col md:space-x-0 md:space-y-6 rounded-xl",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{items.map((item) => {
|
|
if (item.isPrimary) {
|
|
return primaryItem(item);
|
|
}
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
buttonVariants({ variant: "ghost" }),
|
|
pathname === item.href ? "bg-muted" : "",
|
|
"justify-start rounded-full text-sm sm:text-xl text-normal text-stone-700"
|
|
)}
|
|
>
|
|
<span className="mr-2">{item.icon}</span>
|
|
{item.title}
|
|
{pathname === item.href && (
|
|
<Dot className="hidden sm:block flex-shrink-0" size={48} />
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|