@ragrabbit/mcp

by madarco
Verified
"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> ); }