Javascript 聚合物应用抽屉关闭时留下悬挂包装&；内容不会占用所有空间

我试图构建一个布局类似youtube web（www.youtube.com）的应用程序，下面是我的代码：

      <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>

。我面临一些问题：

每当点击切换按钮时，左边的应用程序抽屉就不见了，但它的包装器不见了，右边的内容就挂在左边。与之不同的是，每当我尝试单击左上角的菜单按钮时，它都会隐藏菜单抽屉，而右边的内容将填满所有左边的空间
我的谷歌地图无法容纳所有空间，即使我试图将其更改为100%高度，它也无法容纳所有空间。我想让它占据所有的空间（宽度和高度）
如有任何意见和答复，我们将不胜感激，谢谢。
需要进行以下更改：


切换隐藏
抽屉的功能
：

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

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

您不必切换
应用程序抽屉
，而必须更改
应用程序抽屉布局
的布局

应用程序抽屉布局
：


如果你想让它像

app drawer layout
的
responsiveWidth
属性的默认值是
640px
，因此您必须增加jsbin中输出的
宽度

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