search

huntabyte / vaul-svelte

An unstyled drawer component for Svelte.
https://vaul-svelte.com
MIT License
467 stars 19 forks source link

Ability to keep the drawer always open, slightly ajar #65

Open kelvindecosta opened 8 months ago

kelvindecosta commented 8 months ago

Describe the feature in detail (code, mocks, or screenshots encouraged)

I have a use case for an "always on" mobile navigation that can be expanded to reveal more options.

Since vaul-svelte has the ability to open a drawer at multiple snap points, it could be possible to have a default "closed" / minimized state and a expanded / opened state.

Below is a screenshot of the native drawer UI in Apple maps:

Apple Maps Interactive Globe, by Apple

When the drawer is in this state (closed/minimized), its children are still capable of receiving input (the search field).

Moreover, the drawer wouldn't behave as a modal in the minimized state. This means that users would still be able to interact with the UI elements behind the drawer (the globe).

I'm not exactly sure if the current API can accommodate this behavior, and would like to start a discussion about implementing such a design.

Thank you for your time!

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

The original React version of vaul closed a similar issue. Although a solution was suggested, it seems like it isn't accessible and has unexpected behaviors.

huntabyte commented 8 months ago

I'll look into this but it does appear this is already possible though you'd have to set a few different props to get rid of those unexpected behaviors. If you can create a reproduction using the information from that react version's issue I'll look into ensuring we expose the proper props and such to make it functional!

kelvindecosta commented 8 months ago

Thank you for the quick response!

I've tried to create the drawer by tinkering with the examples.

Here's a reproduction which almost works.

There is an issue with interacting with the non-drawer elements when it is in the minimized state (similar to the behavior described by this comment in the original issue).