Polymer app-drawer left hanging wrapper when closed & content not take up all space

Question

I was trying to build an app with layout like youtube web (www.youtube.com), here is my code :

      <app-drawer-layout>

        <app-drawer id="menuDrawer" slot="drawer">
          <div class="drawer-contents">
            <paper-icon-item>
              <iron-icon icon="inbox" item-icon slot="item-icon"></iron-icon>
              <span>inbox</span>
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="favorite" item-icon slot="item-icon"></iron-icon>
              <span>favorite</span>
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="polymer" item-icon slot="item-icon"></iron-icon>
              <span>polymer</span>
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="question-answer" item-icon slot="item-icon"></iron-icon>
              <span>question-answer</span>
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="send" item-icon slot="item-icon"></iron-icon>
              <span>send</span>
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="archive" item-icon slot="item-icon"></iron-icon>
              <span>archive</span>
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="backup" item-icon slot="item-icon"></iron-icon>
              <span>backup</span>
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="dashboard" item-icon slot="item-icon"></iron-icon>
              <span>dashboard</span>
            </paper-icon-item>
          </div>
        </app-drawer>

        <app-toolbar>
          <paper-icon-button id="menuButton" icon="menu" on-tap="_onToggle"></paper-icon-button>
        </app-toolbar>

        <div id="navigationMap" style="width: 100%; height: 500px;"></div>

      </app-drawer-layout>

more complete code was at jsbin : https://jsbin.com/sizeruducu/edit?html,output. I'm facing some problems:

Whenever the toggle button clicked, the app drawer at left was gone, but not with it's wrapper, this left the right content hanging in the right side. Unlike youtube web, whenever I tried to click the top left menu button, it will hide the menu drawer, and the right content will fill all the left space.
My google maps won't fit all the space, even when I tried to change it to 100% height, it just won't fit. I want to make it take up all the space (width and height).

Any comment and answer will be appreciated, thank you.

Ofisora Ofisora · Accepted Answer · 2017-08-26T05:21:31

Follwoing changes are required:

Toggle function to hide the drawer:

_onToggle() {
    //this.$.menuDrawer.toggle();
    var drawerLayout = this.$.drawerLayout;
    if (drawerLayout.forceNarrow || !drawerLayout.narrow) {
      drawerLayout.forceNarrow = !drawerLayout.forceNarrow;

    } else {
      drawerLayout.drawer.toggle();
    }
}

Instead of toggling the app-drawer, you have to change the layout of app-drawer-layout.

app-drawer-layout:

<app-drawer-layout force-narrow id="drawerLayout" fullbleed >

The fullbleed attribute will make it fit the size of its container. force-narrow attribute to force to make narrow layout as you want it to be.

To change the height of the navigation:

this.$.navigationMap.style.height = window.innerHeight+'px';

Demo

If you want to make it like youtube. Click here.

The default value of responsiveWidth attribute of app-drawer-layout is 640px, so you must increase the width of output in jsbin.

Polymer app-drawer left hanging wrapper when closed & content not take up all space

1 Answers