Polymer core-header-panel and core-drawer-toggle menu items disappear

Question

In my app I am using core-drawer-toggle to toogle after clicking the menu-item. Sample:

<core-scaffold id="core_scaffold">
  <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
    <core-toolbar id="core_toolbar"></core-toolbar>
    <core-menu selected="Item1" valueattr="label" selectedindex="0" id="core_menu" theme="core-light-theme">
      <core-item id="core_item" core-drawer-toggle horizontal center layout icon="settings" label="Item1" active></core-item>
      <core-item id="core_item1" core-drawer-toggle horizontal center layout icon="settings" label="Item2"></core-item>
    </core-menu>
  </core-header-panel>
  <div id="div" tool>Title</div>
</core-scaffold>

This works fine with chrome in wide and narrow layout.

With firefox and safari it also works fine in the narrow layout. But when I resize the window to wide with safari and firefox the menue-items disappear. Can I use core-drawer-toggle and display the menu items in the wide layout?

Answer 1

I find a way. core-scaffold has a method "togglePanel" (see example)

<core-scaffold id="core_scaffold">
  <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
    <core-toolbar id="core_toolbar"></core-toolbar>
    <core-menu selected="Item1" valueattr="label" selectedindex="0" id="core_menu" theme="core-light-theme">
      <core-item label="Item1" icon="settings" size="24" id="core_item" on-tap="{{ doSomething }}" horizontal center layout active></core-item>
      <core-item label="Item2" icon="settings" size="24" id="core_item1" horizontal center layout></core-item>
    </core-menu>
  </core-header-panel>
  <div id="div" tool>Title</div>
</core-scaffold>

Polymer('my-element', {
  doSomething: function (){
    this.$.core_scaffold.togglePanel();
  }
});