Adds Sidebar Drawer Option On Modal

[judetucker]

Per this comment #21390 (comment) regarding adding a drawer to the framework, I thought I'd offer up the solution that we have been using in prod on V4 for a while.

This attaches the Drawer to the .modal rather than the .collapse to take advantage of the modal backdrop. It can be used as an alternative look to the regular modal dialog and as an option for those looking for an off-canvas nav.

[mdo]

Whoa, this sounds awesome.

[Johann-S]

Great work but I think it's bit strange to not create a new component. Why build this feature on Modal component instead of creating a new one ?

[mdo]

To me, it's either the modal, the navbar, or the collapse. I'd also take an independent plugin that simply toggles a class somewhere though 😆 (like a more basic "collapse").

[judetucker]

Honestly, I tacked it onto Modal because it didn't add any new JS to the code and it provided the modal-backdrop, which helps draw the focus to the drawer. (andd because my JS isn't the strongest 🤐 )

[giulianovelli]

IMHO this should its own component and not tied to other components (modal, navbar and so on). These drawers have become really commonplace and it's probably the biggest bootstrap omission right now. While the effect shown in this page it's cool it's also very different from how drawers usually behave in apps and websites (pushing the content while opening of just covering it without light effects)

[LauLogisch]

Great idea!
I think the default page should slide to the other side so this can be also used on mobile devices.
Dragging the page to the right making the navigation visible or with a button.

[mdo]

/x-ref for #17496 just in case

[XhmikosR]

@mdo: I rebased this and cleaned it up, minus a couple of linting issues.

EDIT:

It seems we have #27035 for the same functionality.

[Johann-S]

The same question remain I don't think we should tweak our Modal to do a Drawer, we should build a new component which will be called Drawer

[XhmikosR]

Well, if you can refactor the code to be shared, sure. Otherwise there will be a lot of duplication.

[XhmikosR]

But anyway I feel like #27035 is a little better.

[XhmikosR]

Closing since this will be a new component.

[viktorsmari]

Can you reference this new component here @XhmikosR ?

[XhmikosR]

There's nothing to reference yet.