(Feature Request) Drawer on the right side

[actra-gschuster]

Feature Requests

As per the guidelines, drawers may be positioned on the right side:
https://material.io/guidelines/layout/structure.html#structure-system-bars

If present, side nav bars can be pinned for permanent display or float temporarily as overlays. Side navs can be positioned on the left or right side of the screen.
The content appearing in the left nav is ideally navigation- or identity-based. Right nav content should be secondary to the main content on a page.

[aaronhudon]

If I'm following you correctly, this can be done through the RTL feature of the drawer.

Perhaps the demo site needs to be amended to show a right-hand drawer?

    <aside class="mdc-temporary-drawer" dir="rtl">
        <nav class="mdc-temporary-drawer__drawer" dir="ltr">
            <header class="mdc-temporary-drawer__header">
                <div class="mdc-temporary-drawer__header-content">
                </div>
            </header>
            <nav class="mdc-temporary-drawer__content">                
            </nav>
        </nav>
    </aside>

[actra-gschuster]

I tried it and it doesn't work as expected (see screenshots), the closed drawer is visible (overlaying the content) and the open drawer is missing the border on the left (it's still on the right).

Code used with angular flex-layout, drawers closed:

<div fxflex="" fxlayout="row" id="content-container" ng-reflect-layout="row" ng-reflect-flex="" style="flex: 1 1 1e-09px; box-sizing: border-box; display: flex; flex-direction: row;">
    <am-persistent-drawer class="mdc-persistent-drawer">
        <am-persistent-drawer-navigation class="mdc-persistent-drawer__drawer" role="navigation">
            <am-persistent-drawer-content style="width: 500px;" class="mdc-persistent-drawer__content">
                Links
            </am-persistent-drawer-content>
        </am-persistent-drawer-navigation>
    </am-persistent-drawer>
    <div fxflex="" style="padding: 10px; flex: 1 1 1e-09px; box-sizing: border-box;" ng-reflect-flex="">
        Toolbar and page content go inside here.
    </div>
    <am-persistent-drawer ng-reflect-align="right" class="mdc-persistent-drawer" dir="rtl" direction="rtl">
        <am-persistent-drawer-navigation class="mdc-persistent-drawer__drawer" role="navigation" dir="ltr" direction="ltr">
            <am-persistent-drawer-content class="mdc-persistent-drawer__content">
                Rechts
            </am-persistent-drawer-content>
        </am-persistent-drawer-navigation>
    </am-persistent-drawer>
</div>

Code used with angular flex-layout, drawers opened:

<div fxflex="" fxlayout="row" id="content-container" ng-reflect-layout="row" ng-reflect-flex="" style="flex: 1 1 1e-09px; box-sizing: border-box; display: flex; flex-direction: row;">
    <am-persistent-drawer class="mdc-persistent-drawer--animating mdc-persistent-drawer--open mdc-persistent-drawer">
        <am-persistent-drawer-navigation class="mdc-persistent-drawer__drawer" role="navigation">
            <am-persistent-drawer-content style="width: 500px;" class="mdc-persistent-drawer__content">
                Links
            </am-persistent-drawer-content>
        </am-persistent-drawer-navigation>
    </am-persistent-drawer>
    <div fxflex="" style="padding: 10px; flex: 1 1 1e-09px; box-sizing: border-box;" ng-reflect-flex="">
        Toolbar and page content go inside here.
    </div>
    <am-persistent-drawer class="mdc-persistent-drawer--animating mdc-persistent-drawer--open mdc-persistent-drawer" ng-reflect-align="right" dir="rtl" direction="rtl">
        <am-persistent-drawer-navigation class="mdc-persistent-drawer__drawer" role="navigation" dir="ltr" direction="ltr">
            <am-persistent-drawer-content class="mdc-persistent-drawer__content">
                Rechts
            </am-persistent-drawer-content>        
        </am-persistent-drawer-navigation>
    </am-persistent-drawer>
</div>

[amsheehan]

We will reach out to design on guidance for this. In the past when this has come up we had no plans to make it possible. Lets see if that has changed since then. Thanks!

[actra-gschuster]

Thanks for your reply.
If it helps: angulars "material 2" already supports drawers on the right side.

[aaronhudon]

@actra-gschuster
Does this help: https://codepen.io/aaronhudon/pen/JrXNrb ?

[actra-gschuster]

I don't see differences to the code I used so why does it work in your plunkr?
Well, to be honest, I switched back to @angular/material for the time being, waiting for the issue to be resolved in either way.

[amsheehan]

Hey, quick update; still having a conversation with our designers, but wanted to touch base on this.

1: RTL probably isn't the right tool for this job since it will mirror the order of all of your inline elements, e.g.: if you have a layout of nav links and icons inline, in your RTL drawer, the order of them will go from [icon] Label ==> Label [icon]

2: I had a few questions to clarify the guidance on left or right drawers and am still waiting to hear back.

[ErraticFox]

Any update? I'd really like this feature as well. Example of usage, having a server list on one side and a users list on the other side, unless you guys have an idea of how to show both of those whenever like so. 👍

[aaronhudon]

@ErraticFox see my post above on how to make it work.

[amsheehan]

Hey, still working on getting an answer to this. Thanks for everyone's patience. In the mean time, it does seem like @aaronhudon has a workaround.

[aaronhudon]

@amsheehan the workaround example isn't totally fleshed out e.g. for mdc-list-item, you need to "undo" the [dir=rtl] rule(s):
e.g. see below. It seems the [dir=rtl] .mdc-list-item is too restrictive a selector.

[dir=rtl] .mdc-list-item {
    margin-left: 32px;
    margin-right: 0;
}

[aaronhudon]

Update for those interested, where you don't need to hack with dir="rtl":

Create a new modifier for the .mdc-temporary-drawer called --right, and apply the same type of transformations used for RTL in the library:

<aside class="mdc-temporary-drawer mdc-temporary-drawer--right">
...
</aside>

    .mdc-temporary-drawer.mdc-temporary-drawer--right .mdc-temporary-drawer__drawer {
        -webkit-transform: translateX(107%);
        transform: translateX(107%);
        -webkit-transform: translateX(calc(100% + 20px));
        transform: translateX(calc(100% + 20px));
        left: auto;
        right: 0;
    }
    .mdc-temporary-drawer--open.mdc-temporary-drawer--right .mdc-temporary-drawer__drawer {
        -webkit-transform: none;
        transform: none;
    }   

[ErraticFox]

@aaronhudon actually helps me a lot! I'd suggest this little change though:

.mdc-persistent-drawer--open.mdc-persistent-drawer--right .mdc-persistent-drawer__drawer {
  -webkit-transform: none;
  transform: none;
  border-right: 0px;
  border-left: 1px solid #e4e4e4;
}

P.S. I also noticed that the right side quickly closes instead of transitioning to close. Though I'm assuming this is to do with the JavaScript side of it as it toggles the class mdc-persistent-drawer--animating and it's probably using the transition for sliding left.

[bonniezhou]

We've checked with our designers and this behavior isn't intended to be supported for navigation drawer specifically, but there are plans for more flexible components to accomplish this in the future.