1<script lang="ts">
 2	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
 3	import type { HTMLAttributes } from 'svelte/elements';
 4	import {
 5		SIDEBAR_COOKIE_MAX_AGE,
 6		SIDEBAR_COOKIE_NAME,
 7		SIDEBAR_WIDTH,
 8		SIDEBAR_WIDTH_ICON
 9	} from './constants.js';
10	import { setSidebar } from './context.svelte.js';
11
12	let {
13		ref = $bindable(null),
14		open = $bindable(true),
15		onOpenChange = () => {},
16		class: className,
17		style,
18		children,
19		...restProps
20	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
21		open?: boolean;
22		onOpenChange?: (open: boolean) => void;
23	} = $props();
24
25	const sidebar = setSidebar({
26		open: () => open,
27		setOpen: (value: boolean) => {
28			open = value;
29			onOpenChange(value);
30
31			// This sets the cookie to keep the sidebar state.
32			document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
33		}
34	});
35</script>
36
37<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
38
39<div
40	data-slot="sidebar-wrapper"
41	style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
42	class={cn(
43		'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
44		className
45	)}
46	bind:this={ref}
47	{...restProps}
48>
49	{@render children?.()}
50</div>