34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { useSidebar } from '@/components/ui/sidebar';
|
|
import { cn } from '@/lib/utils';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
|
|
const SidebarToggle = ({ className }: { className?: string }) => {
|
|
const { open, isMobile, openMobile, toggleSidebar } = useSidebar();
|
|
|
|
return (
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => toggleSidebar()}
|
|
className={cn(
|
|
'bg-secondary-foreground text-primary-foreground hover:bg-secondary-foreground hover:text-primary-foreground z-10 h-10 w-8 rounded-none rounded-bl border-none p-0 shadow-none',
|
|
className,
|
|
)}
|
|
>
|
|
{isMobile ? (
|
|
openMobile ? (
|
|
<ChevronRight className="!h-6 !w-6" />
|
|
) : (
|
|
<ChevronLeft className="!h-6 !w-6" />
|
|
)
|
|
) : open ? (
|
|
<ChevronRight className="!h-6 !w-6" />
|
|
) : (
|
|
<ChevronLeft className="!h-6 !w-6" />
|
|
)}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default SidebarToggle;
|