1<script lang="ts">
 2	import { Button } from '$lib/components/ui/button/index.js';
 3	import { cn } from '$lib/components/ui/utils.js';
 4	import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
 5	import type { ComponentProps } from 'svelte';
 6	import { useSidebar } from './context.svelte.js';
 7
 8	let {
 9		ref = $bindable(null),
10		class: className,
11		onclick,
12		...restProps
13	}: ComponentProps<typeof Button> & {
14		onclick?: (e: MouseEvent) => void;
15	} = $props();
16
17	const sidebar = useSidebar();
18</script>
19
20<Button
21	data-sidebar="trigger"
22	data-slot="sidebar-trigger"
23	variant="ghost"
24	size="icon"
25	class={cn('size-7', className)}
26	type="button"
27	onclick={(e) => {
28		onclick?.(e);
29		sidebar.toggle();
30	}}
31	{...restProps}
32>
33	<PanelLeftIcon />
34	<span class="sr-only">Toggle Sidebar</span>
35</Button>