2024-10-13 16:18:54 -04:00
|
|
|
"use client"
|
2024-10-13 18:33:41 -04:00
|
|
|
import React from 'react'
|
2024-10-13 16:18:54 -04:00
|
|
|
import Link from "next/link"
|
2024-10-13 23:42:09 -04:00
|
|
|
import { useParams, usePathname, useRouter } from "next/navigation"
|
2024-10-13 16:18:54 -04:00
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
import { buttonVariants } from "@/components/ui/button"
|
|
|
|
|
|
|
|
interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
|
2024-10-13 23:42:09 -04:00
|
|
|
items: {
|
|
|
|
href: string
|
|
|
|
title: string
|
|
|
|
}[]
|
|
|
|
disabled?: boolean
|
2024-10-13 16:18:54 -04:00
|
|
|
}
|
|
|
|
|
2024-10-13 18:33:41 -04:00
|
|
|
export function SidebarNav({ className, items, disabled = false, ...props }: SidebarNavProps) {
|
2024-10-13 23:42:09 -04:00
|
|
|
const pathname = usePathname();
|
|
|
|
const params = useParams();
|
|
|
|
const orgId = params.orgId as string;
|
|
|
|
const siteId = params.siteId as string;
|
|
|
|
const resourceId = params.resourceId as string;
|
2024-10-13 16:18:54 -04:00
|
|
|
|
2024-10-13 23:42:09 -04:00
|
|
|
return (
|
|
|
|
<nav
|
|
|
|
className={cn(
|
|
|
|
"flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
|
|
|
|
disabled && "opacity-50 pointer-events-none",
|
|
|
|
className
|
|
|
|
)}
|
|
|
|
{...props}
|
2024-10-13 16:18:54 -04:00
|
|
|
>
|
2024-10-13 23:42:09 -04:00
|
|
|
{items.map((item) => (
|
|
|
|
<Link
|
|
|
|
key={item.href.replace("{orgId}", orgId).replace("{siteId}", siteId).replace("{resourceId}", resourceId)}
|
|
|
|
href={item.href.replace("{orgId}", orgId).replace("{siteId}", siteId).replace("{resourceId}", resourceId)}
|
|
|
|
className={cn(
|
|
|
|
buttonVariants({ variant: "ghost" }),
|
|
|
|
pathname === item.href.replace("{orgId}", orgId).replace("{siteId}", siteId).replace("{resourceId}", resourceId)
|
|
|
|
? "bg-muted hover:bg-muted"
|
|
|
|
: "hover:bg-transparent hover:underline",
|
|
|
|
"justify-start",
|
|
|
|
disabled && "cursor-not-allowed"
|
|
|
|
)}
|
|
|
|
onClick={disabled ? (e) => e.preventDefault() : undefined}
|
|
|
|
tabIndex={disabled ? -1 : undefined}
|
|
|
|
aria-disabled={disabled}
|
|
|
|
>
|
|
|
|
{item.title}
|
|
|
|
</Link>
|
|
|
|
))}
|
|
|
|
</nav>
|
|
|
|
)
|
2024-10-13 18:33:41 -04:00
|
|
|
}
|