The Sidebar is designed for displaying additional information or editing/creating new items. The component provides animation, a close button, and consistent paddings and title positioining. Sidebars are always optional, and can be used on any Page you like.
See props for accessibility features.
An event handler for opening the Sidebar.
The amount of pixels to offset the Sidebar from on the right of the screen. Mostly used for in the case of multiple Sidebars.
The amount of pixels to offset the Sidebar from on the top of the screen. Mostly used for in the case of multiple Sidebars.
When true, hides the close button
To use the close button in a test.
Aria label for the close button.
The length of the animation for sliding in and out the Sidebar.
An optional sticky footer.
A heading to display at the top of the Sidebar.
The button that was used to open the Sidebar. Setting this will allow focus to return to that element when the Sidebar is closed. If it's not set, the focus will be set to the first element on the page.
An event handler for closing the Sidebar.
If true, calls onClose when the user clicks anywhere but the Sidebar.
If true, displays an overlay behind the sidebar when it is open.