Polymer app drawer toggle is not working in big screens

Polymer app drawer is working in mobile screens but not toggling in big screens.

  <app-drawer-layout fullbleed force-narrow>
  <app-drawer id="drawer" slot="drawer" swipe-open>
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="view1" href="[[rootPath]]view1">View One</a>
    </iron-selector>
  </app-drawer>

  <!-- Main content -->
  <app-header-layout has-scrolling-region>

    <app-header class="mainHeader" fixed slot="header" reveals effects="blend-background waterfall">
      <app-toolbar>
          <div main-title>
            Title
          </div>
          <span class="username">USER</span>
          <paper-button class="logout">Signout</paper-button>
      </app-toolbar>
    </app-header>
  </app-header-layout>
</app-drawer-layout>

Any idea why this is not working?

Solution

You don't have the menu icon to toggle the drawer. Add this to your header:

<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>

The complete code would be the following:

<app-drawer-layout fullbleed force-narrow>
  <app-drawer id="drawer" slot="drawer" swipe-open>
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="view1" href="[[rootPath]]view1">View One</a>
    </iron-selector>
  </app-drawer>

  <!-- Main content -->
  <app-header-layout has-scrolling-region>

    <app-header class="mainHeader" fixed slot="header" reveals effects="blend-background waterfall">
      <app-toolbar>
          <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
          <div main-title>
            Title
          </div>
          <span class="username">USER</span>
          <paper-button class="logout">Signout</paper-button>
      </app-toolbar>
    </app-header>
  </app-header-layout>
</app-drawer-layout>