111 lines
3.4 KiB
TypeScript
111 lines
3.4 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
import { Button } from "~/components/ui/button";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "~/components/ui/accordion";
|
|
import { cn } from "~/lib/utils";
|
|
|
|
interface DraftSidebarProps {
|
|
collapsed: boolean;
|
|
onCollapsedChange: (collapsed: boolean) => void;
|
|
queueSection: ReactNode;
|
|
participantsSection: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function DraftSidebar({
|
|
collapsed,
|
|
onCollapsedChange,
|
|
queueSection,
|
|
participantsSection,
|
|
className,
|
|
}: DraftSidebarProps) {
|
|
if (collapsed) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative flex-shrink-0 bg-card border-r border-border transition-all duration-300",
|
|
"w-12 hidden lg:block", // Hide completely on mobile when collapsed
|
|
className
|
|
)}
|
|
>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onCollapsedChange(false)}
|
|
className="absolute top-4 left-1/2 -translate-x-1/2"
|
|
aria-label="Expand sidebar"
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile backdrop */}
|
|
<div
|
|
className="fixed inset-0 bg-black/50 z-40 lg:hidden"
|
|
onClick={() => onCollapsedChange(true)}
|
|
aria-label="Close sidebar"
|
|
/>
|
|
|
|
<div
|
|
className={cn(
|
|
"relative flex-shrink-0 bg-card border-r border-border transition-all duration-300 flex flex-col",
|
|
"w-[350px]",
|
|
// Mobile: fixed overlay, Desktop: normal sidebar
|
|
"fixed inset-y-0 left-0 z-50 lg:relative lg:z-auto",
|
|
className
|
|
)}
|
|
>
|
|
<Accordion
|
|
type="multiple"
|
|
defaultValue={["queue", "participants"]}
|
|
className="flex-1 overflow-hidden"
|
|
>
|
|
{/* Queue Section */}
|
|
<AccordionItem value="queue" className="border-b">
|
|
<AccordionTrigger className="px-4 py-3 hover:no-underline bg-muted/50 hover:bg-muted">
|
|
<h2 className="font-semibold text-sm">My Queue</h2>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="max-h-[40vh] overflow-y-auto pb-0">
|
|
{queueSection}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
{/* Available Participants Section */}
|
|
<AccordionItem value="participants" className="border-0">
|
|
<AccordionTrigger className="px-4 py-3 hover:no-underline bg-muted/50 hover:bg-muted">
|
|
<h2 className="font-semibold text-sm">Available Participants</h2>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="pb-0">
|
|
<div className="h-[calc(100vh-400px)] overflow-y-auto">
|
|
{participantsSection}
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
{/* Collapse button at bottom */}
|
|
<div className="border-t border-border p-2 flex-shrink-0">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onCollapsedChange(true)}
|
|
className="w-full flex items-center justify-center gap-2"
|
|
aria-label="Collapse sidebar"
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
<span className="text-sm">Hide Sidebar</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|