54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { Link } from "@remix-run/react";
|
|
import { ChevronLeft } from "lucide-react";
|
|
import { useSidebar } from "~/hooks/use-sidebar";
|
|
import { cn } from "~/lib/clsx";
|
|
import type { NavItem } from "~/types/constants/nav-item";
|
|
import { DashboardNav } from "./dashboard-nav";
|
|
|
|
type SidebarProps = {
|
|
className?: string;
|
|
navItems: NavItem[];
|
|
};
|
|
|
|
export default function Sidebar({ className, navItems }: SidebarProps) {
|
|
const { isMinimized, toggle } = useSidebar();
|
|
|
|
const handleToggle = () => {
|
|
toggle();
|
|
};
|
|
|
|
return (
|
|
<aside
|
|
className={cn(
|
|
"relative hidden h-full min-h-screen flex-none border-r bg-card bg-white transition-[width] duration-500 lg:block",
|
|
!isMinimized ? "w-72" : "w-[72px]",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="hidden p-5 pt-10 lg:block">
|
|
<Link to="#">
|
|
{isMinimized ? (
|
|
<img src="/favicon.ico" alt="Logo" className="w-10" />
|
|
) : (
|
|
<img src="/img/icon.png" alt="Logo" className="w-40" />
|
|
)}
|
|
</Link>
|
|
</div>
|
|
<ChevronLeft
|
|
className={cn(
|
|
"-right-3 absolute top-10 z-50 cursor-pointer rounded-full border bg-background text-3xl text-primary",
|
|
isMinimized && "rotate-180",
|
|
)}
|
|
onClick={handleToggle}
|
|
/>
|
|
<div className="space-y-4 py-4">
|
|
<div className="px-3 py-2">
|
|
<div className="mt-3 space-y-1">
|
|
<DashboardNav items={navItems} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|