This PR adds two new modifier classes to our .modal
component, .modal-left
and .modal-right
. It uses these two classes to create offcanvas drawers for navigation, content, and more. I've included two slightly different examples for now: a nav component and a list group component. I'm thinking a new example (perhaps a sidebar shopping cart or additional dashboard layout) could help show more of this off, too.
Still needs more work, but wanted to capture the idea from comments in #29017.
Source: https://bootstrap-menu.com/detail-modal.html by @vosidiy
Fixes #27033 (closed), fixes #24718 (closed).
Demo: https://deploy-preview-31285--twbs-bootstrap.netlify.app/docs/5.0/components/modal/#sidebar-modals
This could also probably be backported—thoughts?
TODO:
-
Allow customizing side modals transition? -
Nuke the off canvas example or adapt it to use this solution? -
Fix the right padding issue