New component: Sidebar

[evansjohnson]

Feature request

I'd like Blueprint to provide a reusable Sidebar component that is conditionally visible similar to a Drawer that will take care of accessibility related concerns. For now I imagine this includes:

• setting appropriate html attributes
• making it easy to move focus to the sidebar when opened if that should happen
• making it easy to return focus to the opening element when sidebar is closed

The main difference from a Drawer would be that it should take up space instead of being an overlay. Perhaps there's a better name that is inclusive of top/down positioning.

The sidebar could also possibly support resizing.

Examples

TBD, may add screenshots if I see good examples in the wild

[nerdstep]

We implemented a custom component called AppShell, which supports an app layout with a header, sidebar, aside (right-hand sidebar), and footer, i.e. the holy grail layout. It's inspired by the Mantine component of the same name but using Blueprint.

It auto-collapses on small viewports: