110 lines
3.7 KiB
TypeScript
110 lines
3.7 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import Link from "next/link";
|
|
import { ChevronDown, ChevronRight, type LucideIcon } from "lucide-react";
|
|
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type DashboardSidebarItem = {
|
|
label: string;
|
|
href: string;
|
|
icon: LucideIcon;
|
|
active?: boolean;
|
|
expanded?: boolean;
|
|
children?: DashboardSidebarItem[];
|
|
};
|
|
|
|
type DashboardSidebarProps = {
|
|
items: DashboardSidebarItem[];
|
|
iconSrc?: string;
|
|
brandHref?: string;
|
|
brandHoverLabel?: string;
|
|
top?: ReactNode;
|
|
footerItems?: DashboardSidebarItem[];
|
|
footer?: ReactNode;
|
|
};
|
|
|
|
export function DashboardSidebar({
|
|
items,
|
|
iconSrc,
|
|
brandHref = "/",
|
|
brandHoverLabel,
|
|
top,
|
|
footerItems = [],
|
|
footer,
|
|
}: DashboardSidebarProps) {
|
|
function renderItem(item: DashboardSidebarItem, nested = false) {
|
|
const Icon = item.icon;
|
|
const hasChildren = Boolean(item.children?.length);
|
|
const ChevronIcon = item.expanded ? ChevronDown : ChevronRight;
|
|
|
|
return (
|
|
<div key={item.href} className="space-y-1">
|
|
<Link
|
|
href={item.href}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-nested px-3 py-2 text-sm transition-colors",
|
|
item.active
|
|
? "bg-primary text-primary-foreground"
|
|
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
nested ? "ml-4" : undefined,
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
<span className="flex-1">{item.label}</span>
|
|
{hasChildren ? <ChevronIcon className="h-4 w-4 opacity-70" /> : null}
|
|
</Link>
|
|
{item.expanded && item.children?.length ? item.children.map((child) => renderItem(child, true)) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full flex-col bg-sidebar/40">
|
|
<Link
|
|
href={brandHref}
|
|
className="group mx-4 mt-4 flex items-center gap-3 rounded-surface px-2 py-2 transition-colors hover:bg-muted/60"
|
|
>
|
|
<div className="overflow-hidden rounded-surface border border-border/70 bg-background shadow-sm transition-transform duration-200 group-hover:scale-105">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={iconSrc || "/favicon.ico"}
|
|
alt="Mohs Admin"
|
|
className="h-9 w-9 object-cover"
|
|
/>
|
|
</div>
|
|
<div className="relative min-h-[2.5rem] min-w-0 flex-1 overflow-hidden">
|
|
<div className="absolute inset-0 origin-left transition-all duration-200 group-hover:-translate-y-1 group-hover:opacity-0">
|
|
<p className="truncate text-sm font-semibold text-foreground">Mohs Admin</p>
|
|
<p className="truncate text-xs text-muted-foreground">Website owner workspace</p>
|
|
</div>
|
|
<div className="absolute inset-0 flex items-center">
|
|
<p className="truncate text-sm font-semibold text-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100">
|
|
{brandHoverLabel ?? "Back to Home"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
|
|
{top ? <div className="px-4 pt-2">{top}</div> : null}
|
|
|
|
<Separator className="mb-4 mt-3" />
|
|
|
|
<div className="flex-1 space-y-6 overflow-y-auto px-4 pb-4">
|
|
<nav className="space-y-1">{items.map((item) => renderItem(item))}</nav>
|
|
</div>
|
|
|
|
{footer || footerItems.length ? (
|
|
<>
|
|
<Separator />
|
|
<div className="space-y-2 p-4">
|
|
{footerItems.length ? <nav className="space-y-1">{footerItems.map((item) => renderItem(item))}</nav> : null}
|
|
{footerItems.length && footer ? <Separator /> : null}
|
|
{footer}
|
|
</div>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|