68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
import { IconMenu } from "@tabler/icons-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
|
|
interface TopNavProps extends React.HTMLAttributes<HTMLElement> {
|
|
links: {
|
|
title: string;
|
|
href: string;
|
|
isActive: boolean;
|
|
disabled?: boolean;
|
|
}[];
|
|
}
|
|
|
|
export function TopNav({ className, links, ...props }: TopNavProps) {
|
|
return (
|
|
<>
|
|
<div className="md:hidden">
|
|
<DropdownMenu modal={false}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button size="icon" variant="outline">
|
|
<IconMenu />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent side="bottom" align="start">
|
|
{links.map(({ title, href, isActive, disabled }) => (
|
|
<DropdownMenuItem key={`${title}-${href}`} asChild>
|
|
<Link
|
|
to={href}
|
|
className={!isActive ? "text-muted-foreground" : ""}
|
|
disabled={disabled}
|
|
>
|
|
{title}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<nav
|
|
className={cn(
|
|
"hidden items-center space-x-4 md:flex lg:space-x-6",
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{links.map(({ title, href, isActive, disabled }) => (
|
|
<Link
|
|
key={`${title}-${href}`}
|
|
to={href}
|
|
disabled={disabled}
|
|
className={`text-sm font-medium transition-colors hover:text-primary ${isActive ? "" : "text-muted-foreground"}`}
|
|
>
|
|
{title}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</>
|
|
);
|
|
}
|