41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
"use client"
|
|
import { ChevronLeft, ChevronRight } from "lucide-react"
|
|
import { Button } from "../../ui/button"
|
|
import { cn } from "@/app/_lib/utils"
|
|
import { Overlay } from "../overlay"
|
|
|
|
interface SidebarToggleProps {
|
|
isOpen: boolean
|
|
onToggle: () => void
|
|
position?: "left" | "right"
|
|
className?: string
|
|
}
|
|
|
|
export default function SidebarToggle({ isOpen, onToggle, position = "left", className }: SidebarToggleProps) {
|
|
return (
|
|
<Overlay position={position}>
|
|
<Button
|
|
variant="secondary"
|
|
size="icon"
|
|
onClick={onToggle}
|
|
className={cn(
|
|
"absolute z-10 shadow-md h-8 w-8 bg-background border"
|
|
)}
|
|
>
|
|
{isOpen ? (
|
|
position === "left" ? (
|
|
<ChevronLeft className="h-4 w-4" />
|
|
) : (
|
|
<ChevronRight className="h-4 w-4" />
|
|
)
|
|
) : position === "left" ? (
|
|
<ChevronRight className="h-4 w-4" />
|
|
) : (
|
|
<ChevronLeft className="h-4 w-4" />
|
|
)}
|
|
<span className="sr-only">{isOpen ? "Close sidebar" : "Open sidebar"}</span>
|
|
</Button>
|
|
</Overlay>
|
|
)
|
|
}
|