Responsive classes for offcanvas

Created by: iainhallam

I've got a sidebar down my page that I'd like to move into an offcanvas (looking forward to the full release of v5 to use that), but I'd like it to be "oncanvas" when the page is above a certain width (as a part of the page, rather than overlaid like a shown offcanvas). For an example, see the current version of Slack via the web - as you shrink the window the sidebar becomes an offcanvas element with a button to show it.

Sidebar shown on the page

Sidebar moves to offcanvas, with toggle button in the header

I'm imagining something like the existing responsive classes in Bootstrap would be a possible way of using this: offcanvas, offcanvas-sm, ..., offcanvas-xxl. When used with a breakpoint, the element would only have the offcanvas styles applied below the breakpoint.