How to programmatically open and close Sheet?

[akubima]

How to programmatically open and close a Sheet? For example I use a Sheet as a sidebar in my project and I want the Sheet to close as soon as the user clicks on a link or when there is a change to the route.

Thanks.

[thedittmer]

I need this too. I'd like to close the sheet when the user click any link in the sheet, or when the page changes to a new route.

[thedittmer]

Eureka! I found the solution, the mobile-nav component.

shadcn-svelte/apps/www/src/lib/components/docs/nav/mobile-nav.svelte

Line 12 in 1a3493a

<Sheet.Root bind:open>

Create a variable called open and bind it to the sheet route.
<Sheet.Root bind:open>

Import navigating from $app/stores, and set open to false when navigating.
`import { navigating } from '$app/stores';

let open = false;
$: if ($navigating) open = false;

`

[dhndmn]

Thanks! This helped me out. Just curious - what is special about the word 'open' as opposed to something custom like 'openSheet'. I was trying it the latter way and only when I changed it to simply 'open' did this start to work as intended.

[mstibbard]

open is from the Bits UI Dialog primitive API which is what the Sheet component is built upon.

[robots4life]

let open = false;

<Sheet.Root bind:open>

<Sheet.Content side="left">

<a
	onclick={() => {
		open = false;
	}}
	href="/about"
	class="text-muted-foreground hover:text-foreground {$pageStore.route.id === '/about'
		? 'font-bold text-sky-950'
		: ''}">About</a
>