[MDCDrawer] Add build-in support for change drawer type at runtime

Feature Request

Hello. I’am working on a app that should be adapted depending of the user’s screen size. It uses a Drawer to show the navigation menu. The problem is the following: if I use a Modal Drawer, the user needs to click on the menu button to open it when he’s in a large screen. Mobile users don’t have this problem. To solve the problem, I can use a Dismissible Drawer, but it’s not designed to mobile devices.

Is it possible to add a new element (like Responsive Drawer) that changes depending on the screen size? Or there’s a easy way to change the type of Drawer using css @media? The Material Design specification says that “[Modal Drawer] can be replaced by standard drawers on tablet and desktop”, but it is not easy to do in web (or I don’t know how).

Proposed solution

IMHO, adding a new type of Drawer is the easier solution. It’s a good idea to add a section in the Drawer Web Component to help developers, showing a way to use a “responsive” drawer that adapts itself depending of the screen.

The #590 issue is similar to this, but it doesn’t show a clear solution to the problem.

Thanks in advance.

[abhiomkar]

Thanks for the suggestion Manuel!

Please see example on Glitch for responsive drawer: https://glitch.com/~material-responsive-drawer

We can link this example to our drawer README file, since this is requested frequently.

PR Welcome 😃

[youbet1980]

Quite a few MDC components were never made for html such as the bottom icons. I’m not sure if something else has taken over instead of this like flutter and we should learn that instead.