| <script lang="ts"> |
| import { Button } from '$lib/components/ui/button/index.js'; |
| import PanelLeftIcon from '@lucide/svelte/icons/panel-left'; |
| import type { ComponentProps } from 'svelte'; |
| import { useSidebar } from './context.svelte.js'; |
|
|
| let { |
| ref = $bindable(null), |
| class: className, |
| onclick, |
| ...restProps |
| }: ComponentProps<typeof Button> & { |
| onclick?: (e: MouseEvent) => void; |
| } = $props(); |
|
|
| const sidebar = useSidebar(); |
| </script> |
|
|
| <Button |
| data-sidebar="trigger" |
| data-slot="sidebar-trigger" |
| variant="ghost" |
| size="icon-lg" |
| class="rounded-full backdrop-blur-lg {className} md:left-{sidebar.open |
| ? 'unset' |
| : '2'} -top-2 -left-2 md:top-0" |
| type="button" |
| onclick={(e) => { |
| onclick?.(e); |
| sidebar.toggle(); |
| }} |
| {...restProps} |
| > |
| <PanelLeftIcon /> |
| <span class="sr-only">Toggle Sidebar</span> |
| </Button> |
|
|
