[Drawer] Create the unstyled component

[michaldudak]

This is the place to gather ideas, measure interest and discuss the API and implementation details of the drawer component.

See #10 for the umbrella issue to track progress on Base UI and mui/material-ui#6218 for the problem this project solves.

[MinhMeoNguyen0]

Can you add something that is simliar to this

[michaldudak]

@MinhMeoNguyen0, this is unrelated to the Drawer component.
I can imaging a Table of contents component that does this, but we're not currently planning anything along these lines. Feel free to create an issue and we can look into it if there is significant interest from the community.

[borabaloglu]

I implemented a drawer component using dialog component. Here you can find the code and demo here. Are you planning to have something with advanced animations? Otherwise it's like semi-styled dialog component.

[michaldudak]

We haven't specced it yet. Do you have something specific in mind when referring to "advanced animations"?

[borabaloglu]

I implemented the component in a way that feels like a mobile bottom sheet (e.g. https://github.com/gorhom/react-native-bottom-sheet). So it allows user interactions like dragging the drawer up and down, which also allows implementing snap points. What I mean by referring to advanced animations is having animations (drag animation, spring animation, rubber band animation) handled by the unstyled drawer component.

I don't know how flexible the data-starting-style and data-ending-style are but I couldn't combine these selectors with drag animations.

[michaldudak]

We're not going to provide any animations out of the box - as the components are unstyled, we can only provide style hooks that you can use to create your own animations. The Dialog component is already flexible enough to enable creating layouts such as mobile navigation on https://base-ui.com, but we'll look into making the most common scenarios easier.