title: Polymer 1.x: Using app-drawer-layout
body: <p><a href="http://jsbin.com/kamusideji/1/edit?html,output" rel="nofollow noreferrer">Here is my jsBin</a>. I want to render <a href="https://elements.polymer-project.org/elements/app-layout?active=app-drawer-layout" rel="nofollow noreferrer">the code example contained here in the documentation</a> (in the 4th section of sample code).</p>
  
  <pre><code>&lt;app-drawer-layout&gt;
    &lt;app-drawer&gt;
      drawer-content
    &lt;/app-drawer&gt;
    &lt;app-header-layout&gt;
      &lt;app-header&gt;
        &lt;app-toolbar&gt;
          &lt;paper-icon-button icon="menu" drawer-toggle&gt;&lt;/paper-icon-button&gt;
          &lt;div main-title&gt;App name&lt;/div&gt;
        &lt;/app-toolbar&gt;
      &lt;/app-header&gt;
  
      main content
  
    &lt;/app-header-layout&gt;
  &lt;/app-drawer-layout&gt;
  </code></pre>
  
  <p>I expect to see following three sections:</p>
  
  <ol>
  <li>the drawer panel to the left,</li>
  <li>the app name and menu <code>paper-icon-button</code>,</li>
  <li>the main content section.</li>
  </ol>
  
  <p>Instead, I only see the sections numbered 1 and 3; and not number 2.</p>
  
  <p>I also expect to see the drawer panel begin in a closed state and toggle when the non existent menu button is clicked. Instead, the drawer panel begins in the open state.</p>
  
  <p>How can I achieve the desired behavior?</p>
  
  <p><a href="http://jsbin.com/kamusideji/1/edit?html,output" rel="nofollow noreferrer">Link to jsBin</a></p>
  
  http://jsbin.com/kamusideji/1/edit?html,output
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;base href="https://polygit.org/components/"&gt;
    &lt;script src="webcomponentsjs/webcomponents-lite.min.js"&gt;&lt;/script&gt;
    &lt;link href="polymer/polymer.html" rel="import"&gt;
    &lt;link href="iron-icon/iron-icon.html" rel="import"&gt;
    &lt;link href="iron-icons/iron-icons.html" rel="import"&gt;
    &lt;link href="paper-icon-button/paper-icon-button.html" rel="import"&gt;
    &lt;link href="app-layout/app-drawer/app-drawer.html" rel="import"&gt;
    &lt;link href="app-layout/app-drawer-layout/app-drawer-layout.html" rel="import"&gt;
    &lt;link href="app-layout/app-header-layout/app-header-layout.html" rel="import"&gt;
    &lt;link href="app-layout/app-header/app-header.html" rel="import"&gt;
    &lt;link href="app-layout/app-toolbar/app-toolbar.html" rel="import"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;dom-module id="x-element"&gt;
  
  &lt;template&gt;
    &lt;style&gt;&lt;/style&gt;
  
  &lt;app-drawer-layout&gt;
    &lt;app-drawer&gt;
      drawer-content
    &lt;/app-drawer&gt;
    &lt;app-header-layout&gt;
      &lt;app-header&gt;
        &lt;app-toolbar&gt;
          &lt;paper-icon-button icon="menu" drawer-toggle&gt;&lt;/paper-icon-button&gt;
          &lt;div main-title&gt;App name&lt;/div&gt;
        &lt;/app-toolbar&gt;
      &lt;/app-header&gt;
  
      main content
  
    &lt;/app-header-layout&gt;
  &lt;/app-drawer-layout&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
    (function(){
      Polymer({
        is: "x-element",
        properties: {},
      });
    })();
  &lt;/script&gt;
  
  &lt;/dom-module&gt;
  
  &lt;x-element&gt;&lt;/x-element&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  Edit 1
  
  <p>If you open the <kbd>Console</kbd> <a href="http://jsbin.com/kamusideji/1/edit?html,output" rel="nofollow noreferrer">tab in the jsBin</a>, it sort of works!? But stops working after you close the console tab??!! WTF? Can someone please clarify what is happening? Is this a bug?</p>
  
  Edit 2
  
  <p>No, it's not a bug. The behavior described in Edit was caused by a change in the state of the <code>media query</code>: the screen size switched to <code>narrow</code>. See answer below.</p>