mirror of
https://github.com/fosrl/pangolin.git
synced 2026-02-02 16:19:08 +00:00
458 lines
18 KiB
TypeScript
458 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
import { useParams, usePathname } from "next/navigation";
|
|
import { cn } from "@app/lib/cn";
|
|
import { useUserContext } from "@app/hooks/useUserContext";
|
|
import { Badge } from "@app/components/ui/badge";
|
|
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
|
|
import { useTranslations } from "next-intl";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger
|
|
} from "@app/components/ui/tooltip";
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger
|
|
} from "@app/components/ui/collapsible";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger
|
|
} from "@app/components/ui/popover";
|
|
import { ChevronDown } from "lucide-react";
|
|
import { build } from "@server/build";
|
|
|
|
export type SidebarNavItem = {
|
|
href?: string;
|
|
title: string;
|
|
icon?: React.ReactNode;
|
|
showEE?: boolean;
|
|
isBeta?: boolean;
|
|
items?: SidebarNavItem[];
|
|
};
|
|
|
|
export type SidebarNavSection = {
|
|
heading: string;
|
|
items: SidebarNavItem[];
|
|
};
|
|
|
|
export interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
|
|
sections: SidebarNavSection[];
|
|
disabled?: boolean;
|
|
onItemClick?: () => void;
|
|
isCollapsed?: boolean;
|
|
}
|
|
|
|
type CollapsibleNavItemProps = {
|
|
item: SidebarNavItem;
|
|
level: number;
|
|
isChildActive: boolean;
|
|
isDisabled: boolean;
|
|
isCollapsed: boolean;
|
|
renderNavItem: (item: SidebarNavItem, level: number) => React.ReactNode;
|
|
t: (key: string) => string;
|
|
build: string;
|
|
isUnlocked: () => boolean;
|
|
};
|
|
|
|
function CollapsibleNavItem({
|
|
item,
|
|
level,
|
|
isChildActive,
|
|
isDisabled,
|
|
isCollapsed,
|
|
renderNavItem,
|
|
t,
|
|
build,
|
|
isUnlocked
|
|
}: CollapsibleNavItemProps) {
|
|
const [isOpen, setIsOpen] = React.useState(isChildActive);
|
|
|
|
// Update open state when child active state changes
|
|
React.useEffect(() => {
|
|
if (isChildActive) {
|
|
setIsOpen(true);
|
|
}
|
|
}, [isChildActive]);
|
|
|
|
return (
|
|
<Collapsible
|
|
key={item.title}
|
|
open={isOpen}
|
|
onOpenChange={setIsOpen}
|
|
className="group/collapsible"
|
|
>
|
|
<CollapsibleTrigger asChild>
|
|
<button
|
|
className={cn(
|
|
"flex items-center w-full rounded transition-colors hover:bg-secondary/50 dark:hover:bg-secondary/20 rounded-md",
|
|
level === 0 ? "p-3 py-1.5" : "py-1.5",
|
|
isChildActive
|
|
? "text-primary font-medium"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
isDisabled && "cursor-not-allowed opacity-60"
|
|
)}
|
|
disabled={isDisabled}
|
|
>
|
|
{item.icon && (
|
|
<span className="flex-shrink-0 mr-2">{item.icon}</span>
|
|
)}
|
|
<div className="flex items-center gap-1.5 flex-1">
|
|
<span className="text-left">{t(item.title)}</span>
|
|
{item.isBeta && (
|
|
<Badge
|
|
variant="outline"
|
|
className="text-muted-foreground"
|
|
>
|
|
{t("beta")}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
{build === "enterprise" &&
|
|
item.showEE &&
|
|
!isUnlocked() && (
|
|
<Badge variant="outlinePrimary">
|
|
{t("licenseBadge")}
|
|
</Badge>
|
|
)}
|
|
<ChevronDown
|
|
className={cn(
|
|
"h-4 w-4 transition-transform duration-200",
|
|
"group-data-[state=open]/collapsible:rotate-180"
|
|
)}
|
|
/>
|
|
</div>
|
|
</button>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<div
|
|
className={cn(
|
|
"border-l ml-3 pl-2 mt-1 space-y-1",
|
|
"border-border"
|
|
)}
|
|
>
|
|
{item.items!.map((childItem) =>
|
|
renderNavItem(childItem, level + 1)
|
|
)}
|
|
</div>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
);
|
|
}
|
|
|
|
export function SidebarNav({
|
|
className,
|
|
sections,
|
|
disabled = false,
|
|
onItemClick,
|
|
isCollapsed = false,
|
|
...props
|
|
}: SidebarNavProps) {
|
|
const pathname = usePathname();
|
|
const params = useParams();
|
|
const orgId = params.orgId as string;
|
|
const niceId = params.niceId as string;
|
|
const resourceId = params.resourceId as string;
|
|
const userId = params.userId as string;
|
|
const apiKeyId = params.apiKeyId as string;
|
|
const clientId = params.clientId as string;
|
|
const { licenseStatus, isUnlocked } = useLicenseStatusContext();
|
|
const { user } = useUserContext();
|
|
const t = useTranslations();
|
|
|
|
function hydrateHref(val?: string): string | undefined {
|
|
if (!val) return undefined;
|
|
return val
|
|
.replace("{orgId}", orgId)
|
|
.replace("{niceId}", niceId)
|
|
.replace("{resourceId}", resourceId)
|
|
.replace("{userId}", userId)
|
|
.replace("{apiKeyId}", apiKeyId)
|
|
.replace("{clientId}", clientId);
|
|
}
|
|
|
|
function isItemOrChildActive(item: SidebarNavItem): boolean {
|
|
const hydratedHref = hydrateHref(item.href);
|
|
if (hydratedHref && pathname.startsWith(hydratedHref)) {
|
|
return true;
|
|
}
|
|
if (item.items) {
|
|
return item.items.some((child) => isItemOrChildActive(child));
|
|
}
|
|
return false;
|
|
}
|
|
|
|
const renderNavItem = (
|
|
item: SidebarNavItem,
|
|
level: number = 0
|
|
): React.ReactNode => {
|
|
const hydratedHref = hydrateHref(item.href);
|
|
const hasNestedItems = item.items && item.items.length > 0;
|
|
const isActive = hydratedHref ? pathname.startsWith(hydratedHref) : false;
|
|
const isChildActive = hasNestedItems ? isItemOrChildActive(item) : false;
|
|
const isEE =
|
|
build === "enterprise" && item.showEE && !isUnlocked();
|
|
const isDisabled = disabled || isEE;
|
|
const tooltipText =
|
|
item.showEE && !isUnlocked()
|
|
? `${t(item.title)} (${t("licenseBadge")})`
|
|
: t(item.title);
|
|
|
|
// If item has nested items, render as collapsible
|
|
if (hasNestedItems && !isCollapsed) {
|
|
return (
|
|
<CollapsibleNavItem
|
|
key={item.title}
|
|
item={item}
|
|
level={level}
|
|
isChildActive={isChildActive}
|
|
isDisabled={isDisabled || false}
|
|
isCollapsed={isCollapsed}
|
|
renderNavItem={renderNavItem}
|
|
t={t}
|
|
build={build}
|
|
isUnlocked={isUnlocked}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// Regular item without nested items
|
|
const itemContent = hydratedHref ? (
|
|
<Link
|
|
href={isDisabled ? "#" : hydratedHref}
|
|
className={cn(
|
|
"flex items-center rounded transition-colors hover:bg-secondary/50 dark:hover:bg-secondary/20 rounded-md",
|
|
isCollapsed ? "px-2 py-2 justify-center" : "px-3 py-1.5",
|
|
isActive
|
|
? "text-primary font-medium"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
isDisabled && "cursor-not-allowed opacity-60"
|
|
)}
|
|
onClick={(e) => {
|
|
if (isDisabled) {
|
|
e.preventDefault();
|
|
} else if (onItemClick) {
|
|
onItemClick();
|
|
}
|
|
}}
|
|
tabIndex={isDisabled ? -1 : undefined}
|
|
aria-disabled={isDisabled}
|
|
>
|
|
{item.icon && (
|
|
<span
|
|
className={cn("flex-shrink-0", !isCollapsed && "mr-2")}
|
|
>
|
|
{item.icon}
|
|
</span>
|
|
)}
|
|
{!isCollapsed && (
|
|
<>
|
|
<div className="flex items-center gap-1.5 flex-1">
|
|
<span>{t(item.title)}</span>
|
|
{item.isBeta && (
|
|
<Badge
|
|
variant="outline"
|
|
className="text-muted-foreground"
|
|
>
|
|
{t("beta")}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
{build === "enterprise" &&
|
|
item.showEE &&
|
|
!isUnlocked() && (
|
|
<Badge variant="outlinePrimary">
|
|
{t("licenseBadge")}
|
|
</Badge>
|
|
)}
|
|
</>
|
|
)}
|
|
</Link>
|
|
) : (
|
|
<div
|
|
className={cn(
|
|
"flex items-center rounded transition-colors px-3 py-1.5",
|
|
"text-muted-foreground",
|
|
isDisabled && "cursor-not-allowed opacity-60"
|
|
)}
|
|
>
|
|
{item.icon && (
|
|
<span className="flex-shrink-0 mr-2">{item.icon}</span>
|
|
)}
|
|
<div className="flex items-center gap-1.5 flex-1">
|
|
<span>{t(item.title)}</span>
|
|
{item.isBeta && (
|
|
<Badge
|
|
variant="outline"
|
|
className="text-muted-foreground"
|
|
>
|
|
{t("beta")}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
{build === "enterprise" &&
|
|
item.showEE &&
|
|
!isUnlocked() && (
|
|
<Badge variant="outlinePrimary">
|
|
{t("licenseBadge")}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
if (isCollapsed) {
|
|
// If item has nested items, show popover instead of tooltip
|
|
if (hasNestedItems) {
|
|
return (
|
|
<Popover key={item.title}>
|
|
<PopoverTrigger asChild>
|
|
<button
|
|
className={cn(
|
|
"flex items-center rounded transition-colors hover:bg-secondary/50 dark:hover:bg-secondary/20 rounded-md px-2 py-2 justify-center w-full",
|
|
isChildActive
|
|
? "text-primary font-medium"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
isDisabled && "cursor-not-allowed opacity-60"
|
|
)}
|
|
disabled={isDisabled}
|
|
>
|
|
{item.icon && (
|
|
<span className="flex-shrink-0">
|
|
{item.icon}
|
|
</span>
|
|
)}
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
side="right"
|
|
align="start"
|
|
className="w-56 p-1"
|
|
>
|
|
<div className="space-y-1">
|
|
{item.items!.map((childItem) => {
|
|
const childHydratedHref = hydrateHref(
|
|
childItem.href
|
|
);
|
|
const childIsActive = childHydratedHref
|
|
? pathname.startsWith(
|
|
childHydratedHref
|
|
)
|
|
: false;
|
|
const childIsEE =
|
|
build === "enterprise" &&
|
|
childItem.showEE &&
|
|
!isUnlocked();
|
|
const childIsDisabled =
|
|
disabled || childIsEE;
|
|
|
|
if (!childHydratedHref) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
key={childItem.title}
|
|
href={
|
|
childIsDisabled
|
|
? "#"
|
|
: childHydratedHref
|
|
}
|
|
className={cn(
|
|
"flex items-center rounded transition-colors px-3 py-1.5 text-sm",
|
|
childIsActive
|
|
? "bg-secondary text-primary font-medium"
|
|
: "text-muted-foreground hover:bg-secondary/50 hover:text-foreground",
|
|
childIsDisabled &&
|
|
"cursor-not-allowed opacity-60"
|
|
)}
|
|
onClick={(e) => {
|
|
if (childIsDisabled) {
|
|
e.preventDefault();
|
|
} else if (onItemClick) {
|
|
onItemClick();
|
|
}
|
|
}}
|
|
>
|
|
{childItem.icon && (
|
|
<span className="flex-shrink-0 mr-2">
|
|
{childItem.icon}
|
|
</span>
|
|
)}
|
|
<div className="flex items-center gap-1.5 flex-1">
|
|
<span>{t(childItem.title)}</span>
|
|
{childItem.isBeta && (
|
|
<Badge
|
|
variant="outline"
|
|
className="text-muted-foreground"
|
|
>
|
|
{t("beta")}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
{build === "enterprise" &&
|
|
childItem.showEE &&
|
|
!isUnlocked() && (
|
|
<Badge
|
|
variant="outlinePrimary"
|
|
>
|
|
{t("licenseBadge")}
|
|
</Badge>
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|
|
|
|
// Regular item without nested items - show tooltip
|
|
return (
|
|
<TooltipProvider key={item.title}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>{itemContent}</TooltipTrigger>
|
|
<TooltipContent side="right" sideOffset={8}>
|
|
<p>{tooltipText}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<React.Fragment key={item.title}>{itemContent}</React.Fragment>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<nav
|
|
className={cn(
|
|
"flex flex-col gap-2 text-sm",
|
|
disabled && "pointer-events-none opacity-60",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{sections.map((section) => (
|
|
<div key={section.heading} className="mb-2">
|
|
{!isCollapsed && (
|
|
<div className="px-3 py-1 text-xs font-semibold text-muted-foreground/70 uppercase tracking-wide">
|
|
{section.heading}
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col gap-1">
|
|
{section.items.map((item) => renderNavItem(item, 0))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|