"use client";
import { Menu } from "./menu";
import { SidebarToggle } from "./sidebar-toggle";
import { Button } from "@repo/design/shadcn/button";
import { useSidebar } from "@repo/design/hooks/use-sidebar";
import { useStore } from "@repo/design/hooks/use-store";
import { cn } from "@repo/design/lib/utils";
import { PanelsTopLeft } from "lucide-react";
import Link from "next/link";
export function Sidebar({ signOut }: { signOut: () => Promise<void> }) {
const sidebar = useStore(useSidebar, (x) => x);
if (!sidebar) return null;
const { isOpen, toggleOpen, getOpenState, setIsHover, settings } = sidebar;
return (
<aside
className={cn(
"fixed top-16 left-0 z-20 h-screen -translate-x-full lg:translate-x-0 transition-[width] ease-in-out duration-300",
!getOpenState() ? "w-[90px]" : "w-72",
settings.disabled && "hidden"
)}
>
<SidebarToggle isOpen={isOpen} setIsOpen={toggleOpen} />
<div
onMouseEnter={() => setIsHover(true)}
onMouseLeave={() => setIsHover(false)}
className="relative h-full flex flex-col px-3 overflow-y-auto shadow-md dark:shadow-zinc-800"
>
{/* <Button
className={cn(
"transition-transform ease-in-out duration-300 mb-1",
!getOpenState() ? "translate-x-1" : "translate-x-0"
)}
variant="link"
asChild
>
<Link href="/dashboard" className="flex items-center gap-2">
<PanelsTopLeft className="w-6 h-6 mr-1" />
<h1
className={cn(
"font-bold text-lg whitespace-nowrap transition-[transform,opacity,display] ease-in-out duration-300",
!getOpenState() ? "-translate-x-96 opacity-0 hidden" : "translate-x-0 opacity-100"
)}
>
Brand
</h1>
</Link>
</Button> */}
<Menu isOpen={getOpenState()} signOut={signOut} />
</div>
</aside>
);
}