Drawers

Create a Store

Create a Svelte writable store to manage the state of the drawer.

import { writable, type Writable } from 'svelte/store';

const storeDrawer: Writable<boolean> = writable(false);

Implement Drawer

Pass the store to the Drawer component. For best results implement your Drawer component in your applications root scope.

<Drawer open={storeDrawer} position="left">
	(contents)
</Drawer>

Open and Close Triggers

Set the store value to true too open the drawer.

const drawerOpen: any = () => { storeDrawer.set(true) };

<button on:click={drawerOpen}>Open</button>

Set the store value to false too close the drawer. You can also tap the backdrop or hit ESC on your keyboard.

const drawerClose: any = () => { storeDrawer.set(false) };

<button on:click={drawerClose}>Close</button>

Pairing with App Shell

Place the Drawer above and outside the App Shell in your root layout. This will prevent page content shifting as the Drawer changes state.

<Drawer></Drawer>

<AppShell></AppShell>