No 2nd app-drawer supported in 2.0 preview?

[PaulHMason]

Description

In v1 I could have two app-drawer elements (left and right) in an app-drawer-layout element, but with v2 I can only have one.

Expected outcome

I should be able to have both a left and right drawer.

Actual outcome

I can only have a left or a right drawer.

[keanulee]

Hi @PaulHMason,

The app-drawer-layout element was only ever intended to support one drawer - in fact in 1.0, app-drawer-layout would only ever toggle the state of the first (left) drawer. For this reason, we removed the misleading "two drawers" demo as part of the work to migrate to 2.0.

[PaulHMason]

Hmmmm, that's a bit of a let down - being able have a second drawer that can be manually toggled is very useful for business type applications.

[keanulee]

You can still have two app-drawer's on your page; you'll just need to control the layout yourself (since there's a variety of cases and we can't cover them all in app-drawer-layout). For example:

<style>
main { margin: 0 256px; }
</style>
<app-drawer opened persistent></app-drawer>
<app-drawer align="right" opened persistent></app-drawer>
<main></main>

With that said, you should definitely evaluate whether you really need to use app-drawer or if a position: fixed element is enough (e.g. if the panel is always open, or if you don't need swiping, or you don't need a scrim, these are signs that app-drawer may not be appropriate).

[rkief]

Seems to work for me. I have navigation on the right and drawer for additional menu items on left.
page-both.txt

<dom-module id="page-both">
  <template>
    <app-drawer-layout fullbleed>
      <!-- Left Navigation content -->
      <app-drawer id="nav" slot="drawer" swipe-open>
        <app-header-layout has-scrolling-region>
          <app-header slot="header" fixed effects="waterfall">
            <app-toolbar>
              <slot name="logo"></slot>
            </app-toolbar>
            <div class="horizontal layout search">
              <slot name="search"></slot>
              <slot name="add"></slot>
            </div>
          </app-header>
          <slot name="nav"></slot>
        </app-header-layout>
      </app-drawer>
      <!-- Right Drawer content -->
      <app-drawer id="drawer" align="end" slot="drawer" swipe-open>
        <slot name="drawer"></slot>
      </app-drawer>
      <!-- Main content -->
      <app-header-layout has-scrolling-region>
        <app-header slot="header" fixed condenses effects="waterfall">
          <app-toolbar>
            <paper-icon-button icon="app-icons:menu" drawer-toggle></paper-icon-button>
            <slot name="title"></slot>
            <paper-icon-button id="drawerIcon" icon="app-icons:menu" on-tap="_toggleDrawer"></paper-icon-button>
          </app-toolbar>
        </app-header>
        <slot name="content"></slot>
      </app-header-layout>
    </app-drawer-layout>
  </template>
  <script>
    class PageBoth extends Polymer.Element {
      static get is() { return 'page-both'; }
      _toggleDrawer() {
        this.$.drawer.toggle();
      }
    }
    window.customElements.define(PageBoth.is, PageBoth);
  </script>
</dom-module>

[frankiefu]

@rkief Thanks for the example.
@PaulHMason The example by @rkief should be good for you use case.

[ShaggyDude]

For the record, I need two menus both left and right and I do need to be able to toggle and swipe them. I'm going to try and make a fork and example as I think this is a pretty common layout.

[robrez]

If you read through the code in app-drawer-layout, we can see spots in the code that don't support dual drawers in all of the states that you might want. I'm not sure that they example above would work as intended. Note this internal class:

      #contentContainer[drawer-position=left] {
        margin-left: var(--app-drawer-width, 256px);
      }
      #contentContainer[drawer-position=right] {
        margin-right: var(--app-drawer-width, 256px);
      }

contentContainer can only have one value for @drawer-position... it is either left or right. If you have two drawers the content on one side will be "truncated" by the drawer. Things can breakdown further from there, eg: opening and closing.

It is possible to have two drawers as requested by using two nested app-drawer layouts. Just take your existing layout with one drawer and wrap it in another app-drawer-layout.

  <app-drawer-layout>
    <app-drawer slot="drawer" align="right" opened persistent>right drawer</app-drawer>

    <app-drawer-layout>
        <app-drawer slot="drawer" opened persistent>left drawer</app-drawer>
        <main>main content</main>
    </app-drawer-layout>

  </app-drawer-layout>

With that said, it would be nice to offer a separate component.. say app-dual-drawer-layout. It would have left/right flavors of each attr supported by the main drawer layout. eg: persistent-left, opened-right, etc. Might this repo be open to a PR for that, or would you prefer someone do that on their own?