mwc-drawer only supports left-side drawers

[isochronous]

I'm submitting a:

• bug report
• feature request

What OS are you using?

Windows 10 Pro, build 17134

What browser(s) is this bug affecting:

All of them

Current behavior:

The material design guidelines clearly state that drawers can be placed on both the left AND RIGHT side of the screen depending on the situation. However, it appears that the mwc-drawer component (which seems to be just a generalized drawer control, not only a nav drawer) only supports left-side placement. Issue #1324 for the MDC components indicated that this use case would be designed for in a future control: "there are plans for more flexible components to accomplish this in the future." This seems like the correct time and place for that feature's addition.

Expected behavior:
There should be a property, attribute, or other mechanism by which the drawer can be configured for right-side placement.

Steps to reproduce:

Look at your own drawer demos.

[fernandopasik]

I don't think it is supported by MDC components yet but in the guidelines, there's mention of a bottom drawer as well

https://material.io/components/navigation-drawer/#bottom-drawer

[e111077]

Right side drawer is explicitly not supported in spec unless it is an RTL language. Keeping this open as I don't think we yet support RTL on drawer.

Instead there is a concept of a "panel" which has not been implemented.

Bottom drawer has also not been implemented but is planned

[isochronous]

Well, a previous incarnation of this component (app-drawer) did support it, and we've made pretty heavy use of it. The issue that we had with it was that it was too heavily opinionated when used in conjunction with its associated layout - it kept doing stuff automatically that we explicitly did not want it to do (like ALWAYS automatically opening above a certain viewport width), and there was seemingly no way to get around that outside of ugly code kludges, so we rolled our own layout component that used app-drawer instead. I was hoping that this would be a more generalized component, rather than being explicitly a *nav* drawer, but I agree that if it is to be a nav drawer, this should follow the nav drawer spec. I'll also just mention that at the time I filed this "bug", the material spec had an entry for just a plain ol' "drawer" that wasn't JUST a nav drawer. That's one of the major problems I have with the material spec documentation - it gets updated, names of things change, spec content changes, and we have no way to reference previous pages or documentation versions. I could previously point to the exact spot in the docs where it says right-side drawers are supported outside of navigational concerns, but now? I might as well have imagined it.

…

On Thu, Jul 9, 2020 at 3:50 PM Elliott Marquez ***@***.***> wrote: Right side drawer is explicitly not supported in spec unless it is an RTL language. Keeping this open as I don't think we yet support RTL on drawer. Instead there is a concept of a "panel" which has not been implemented. Bottom drawer has also not been implemented but is planned — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#477 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAF5DUJKUUQYLFP5BZCOPTDR2YNQFANCNFSM4IXEHTTQ> .

[isochronous]

Given the crazy number of teams and projects at Google, I'm aware that your current team may have had little to no influence over that previous app-drawer component I mentioned, I'm just saying that it was kind of the precursor to mdc-drawer (and thus mwc-drawer), and it supported both left and right-side drawers. It's frustrating that now we're two generations past that component but still don't have that option.

[e111077]

Ah apologies it took so long to get to this issue. Though, you might be able to subclass the current component and inject styles and logic that you'd like as a workaround for now until we get a side-panel eventually implemented

[isochronous]

No worries, I appreciate the suggestion. I'm a big fan of the mwc-components overall, this has just been my own personal bugaboo recently.

[JosefJezek]

MD has side sheet https://material.io/components/sheets-side

[asyncliz]

Obsolete in M3