NEXT: Drawers

[endigo9740]

Warning

This issue is a work in progress.

This will act as a hub to centralize this information.

Maintainer Requests

The following requests are coming straight from the Skeleton team. These are highly likely be implemented:

• This should borrow heavily from the updated Modal system
• Allow multiple drawers to be displayed at once (stacking)
• (expect more soon)

Community Requests

The following requests have come from the community and are under consideration:

• Drawer Improvements #2605
• Pass easing functions to the drawers open and close transitions
• Swipe to close drawers on mobile

Bugs and Issues

• n/a

Feedback

If you have additional updates or requests for this feature, please do so in the comments section below.

[ImGajeed76]

Hi there, I got a feature request! 😊

It would be very nice if we could pass easing functions to the drawers open and close transitions.

[ImGajeed76]

Hi again, I got another one.

It would be nice if you could just swipe to close the drawers. (mostly for mobile)

[jhechtf]

Please move drawers away from the singleton pattern.

[apple-phi]

Over in the Discord, there was a brief discussion about shallow routing for Drawers in v2, and @Sarenor asked me to send my solution for this here. I haven't done properly extensive testing on this, but it seems to work.

function openDrawer(): void {
	pushState('', { showDrawer: true });
	drawerStore.open({ position: 'right' });
}

<script lang="ts">
	function closeDrawer(): void {
		history.back();
	}
	$: $drawerStore.open = $page.state.showDrawer;
</script>

<Drawer>
...
</Drawer>

For type safety, you also need to set the interface for the page state in app.d.ts.

Ref:

• https://discord.com/channels/1003691521280856084/1151213014721241128/1231206031657275402
• https://kit.svelte.dev/docs/shallow-routing

[endigo9740]

In v3, we're going to combine modals/drawers/toasts into a unified "overlay system":

• NEXT: Overlay System (modals/drawers/toasts) #2357