Drawer

[Willienn]

Drawer

The Drawer gives users a quick entry point to configuration and information.

There are three main components to represent a Drawer:

• OverlayDrawer: An overlay Drawer renders on top of the whole page. By default blocks the screen and will require the user's full attention. Uses Dialog component under the hood.
• InlineDrawer: An inline Drawer renders within a container and can be placed next to any content.
• Drawer: A combination of OverlayDrawer and InlineDrawer. Used when toggling between the two modes is necessary. Often used for responsiveness.

Tasks:

• [x] Drawer
  • [x] overlay: overlayDrawer contains supplementary content and is used for complex creation, edit, or management experiences. Can be disabled by setting the modalType prop to non-modal - [ ] inline: inlineDrawer is often used for navigation that is not dismissible. As it is on the same level as the main surface, users can still interact with other UI elements.
  • [x] position: when a Drawer is invoked, it slides in from either the left or right side, or bottom of the screen. This can be specified by the position prop.
  • [x] onOpenChange: callback fired when the component changes value from open state.
  • [x] defaultOpen: default value for the uncontrolled open state of the dialog.
  • [x] open: controls the open state of the Drawer
  • [x] size: the size prop controls the width of the drawer. The default is small.
  • [x] separator: the separator prop adds a line separator between the drawer and the content.
  • [x] behavior: follow behavior specified here

[Willienn]

Doing inline prop would demand too much time, as it is not implemented on the drawer primitive and needs to be done from the ground up.