chatbot-template/components/sidebar-mobile.tsx
2024-03-14 20:00:52 +03:00

31 lines
847 B
TypeScript

'use client'
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
import { Sidebar } from '@/components/sidebar'
import { Button } from '@/components/ui/button'
import { IconSidebar } from '@/components/ui/icons'
interface SidebarMobileProps {
children: React.ReactNode
}
export function SidebarMobile({ children }: SidebarMobileProps) {
return (
<Sheet>
<SheetTrigger asChild>
<Button variant="ghost" className="-ml-2 flex size-9 p-0 lg:hidden">
<IconSidebar className="size-6" />
<span className="sr-only">Toggle Sidebar</span>
</Button>
</SheetTrigger>
<SheetContent
side="left"
className="inset-y-0 flex h-auto w-[300px] flex-col p-0"
>
<Sidebar className="flex">{children}</Sidebar>
</SheetContent>
</Sheet>
)
}