@ragrabbit/mcp

by madarco
Verified
"use client"; import Link from "next/link"; import { Ellipsis, LogOut } from "lucide-react"; import { usePathname } from "next/navigation"; import { cn } from "@repo/design/lib/utils"; import { Button } from "@repo/design/shadcn/button"; import { ScrollArea } from "@repo/design/shadcn/scroll-area"; import { CollapseMenuButton } from "./collapse-menu-button"; import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@repo/design/shadcn/tooltip"; import { useConfig } from "../../providers/config-provider"; interface MenuProps { isOpen: boolean | undefined; signOut: () => Promise<void>; } export function Menu({ isOpen, signOut }: MenuProps) { const pathname = usePathname(); const { sidebarMenu } = useConfig(); return ( <ScrollArea className="[&>div>div[style]]:!block"> <nav className="mt-8 w-full"> <ul className="flex flex-col min-h-[calc(100vh-48px-36px-16px-32px-32px)] lg:min-h-[calc(100vh-32px-40px-32px-32px)] items-start space-y-1 px-2"> {sidebarMenu.map(({ groupLabel, menus }, index) => ( <li className={cn("w-full", groupLabel ? "pt-5" : "")} key={index}> {(isOpen && groupLabel) || isOpen === undefined ? ( <p className="text-sm font-medium text-muted-foreground px-4 pb-2 max-w-[248px] truncate"> {groupLabel} </p> ) : !isOpen && isOpen !== undefined && groupLabel ? ( <TooltipProvider> <Tooltip delayDuration={100}> <TooltipTrigger className="w-full"> <div className="w-full flex justify-center items-center"> <Ellipsis className="h-5 w-5" /> </div> </TooltipTrigger> <TooltipContent side="right"> <p>{groupLabel}</p> </TooltipContent> </Tooltip> </TooltipProvider> ) : ( <p className="pb-2"></p> )} {menus.map(({ href, label, icon: Icon, active, submenus }, index) => !submenus || submenus.length === 0 ? ( <div className="w-full" key={index}> <TooltipProvider disableHoverableContent> <Tooltip delayDuration={100}> <TooltipTrigger asChild> <Button variant={ (active === undefined && pathname?.startsWith(href)) || active ? "secondary" : "ghost" } className="w-full justify-start h-10 mb-1" asChild > <Link href={href}> <span className={cn(isOpen === false ? "" : "mr-4")}> <Icon size={18} /> </span> <p className={cn( "max-w-[200px] truncate", isOpen === false ? "-translate-x-96 opacity-0" : "translate-x-0 opacity-100" )} > {label} </p> </Link> </Button> </TooltipTrigger> {isOpen === false && <TooltipContent side="right">{label}</TooltipContent>} </Tooltip> </TooltipProvider> </div> ) : ( <div className="w-full" key={index}> <CollapseMenuButton icon={Icon} label={label} active={active === undefined ? pathname?.startsWith(href) : active} submenus={submenus} isOpen={isOpen} /> </div> ) )} </li> ))} <li className="w-full grow flex items-end"> <TooltipProvider disableHoverableContent> <Tooltip delayDuration={100}> <TooltipTrigger asChild> <Button onClick={() => signOut()} variant="outline" className="w-full justify-center h-10 mt-5"> <span className={cn(isOpen === false ? "" : "mr-4")}> <LogOut size={18} /> </span> <p className={cn("whitespace-nowrap", isOpen === false ? "opacity-0 hidden" : "opacity-100")}> Sign out </p> </Button> </TooltipTrigger> {isOpen === false && <TooltipContent side="right">Sign out</TooltipContent>} </Tooltip> </TooltipProvider> </li> </ul> </nav> </ScrollArea> ); }