title: Polymer <paper-drawer-panel> nest 'drawer' inside 'main'
body: <p>Alright, so as I see it, the proper element nesting for <code>paper-drawer-panel</code> should be something like this:</p>
  
  <pre><code>&lt;paper-drawer-panel&gt;
    &lt;paper-header-panel drawer&gt;
      &lt;!-- Side bar content --&gt;
      &lt;paper-menu&gt;......&lt;/paper-menu&gt;
  
    &lt;/paper-header-panel&gt;
    &lt;paper-scroll-header-panel main&gt;
      &lt;paper-toolbar class="tall"&gt;
      &lt;/paper-toolbar&gt;
      &lt;div class="main-content"&gt;
        &lt;!-- Main app body content here --&gt;
      &lt;/div&gt;
      &lt;!-- Main body content --&gt;
  &lt;/paper-drawer-panel&gt;
  </code></pre>
  
  <p>The above hierarchy will give you something like this (current template for site I'm working on):</p>
  
  <p><a href="https://i.stack.imgur.com/lBBKp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lBBKp.png" alt="enter image description here"></a></p>
  
  <p>However this is what I am trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/UynsG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UynsG.png" alt="enter image description here"></a></p>
  
  <p>Now, I can get it to look how I want to (hence the screenshot) however, problem is it does not act right at all. Here is the code for the above ideal, yet non-functional layout:</p>
  
  <pre><code>  &lt;paper-scroll-header-panel condenses keep-condensed-header&gt;
      &lt;paper-toolbar class="tall"&gt;
        &lt;paper-icon-button icon="menu" paper-drawer-toggle&gt;&lt;/paper-icon-button&gt;
        &lt;div class="flex"&gt;&lt;/div&gt;
        &lt;div class="bottom title"&gt;Dom Farolino&lt;/div&gt;
      &lt;/paper-toolbar&gt;
      &lt;div class="content"&gt;
        &lt;paper-drawer-panel&gt;
          &lt;paper-header-panel mode="scroll" drawer&gt;
            &lt;paper-toolbar id="navheader" class="tall"&gt;
              &lt;img class="middle profile" hidden&gt;
              &lt;div class="bottom layout vertical"&gt;
                &lt;span&gt;Dom Farolino&lt;/span&gt;
                &lt;span&gt;domfarolino@gmail.com&lt;/span&gt;
              &lt;/div&gt;
            &lt;/paper-toolbar&gt;
            &lt;paper-menu class="list"&gt;
              &lt;paper-item&gt;New item here&lt;/paper-item&gt;
              &lt;paper-item&gt;New item here&lt;/paper-item&gt;
            &lt;/paper-menu&gt;
          &lt;/paper-header-panel&gt;
          &lt;div main&gt;
            &lt;content id="objects" select="*"&gt;&lt;/content&gt;
          &lt;/div&gt;
        &lt;/paper-drawer-panel&gt;
      &lt;/div&gt;
    &lt;/paper-scroll-header-panel&gt;
  </code></pre>
  
  <p>As I said, it is not even close to properly functioning. For starters, I cannot toggle the drawer in and out with the obvious on-screen button. This is no surprise because the component designated as my <code>paper-drawer-toggle</code> is not even in the <code>paper-drawer-panel</code> component. Also any components placed inside this larger component that appear inside the <code>&lt;content&gt;</code> component are not placed properly inside the body.</p>
  
  <p>I really curious as to how I can achieve functionality with the second layout because I prefer that one over the first one. Perhaps my layout is wrong and maybe I shouldn't even be using <code>&lt;paper-drawer-panel&gt;</code> and maybe I should be using a drawer separately from all of this if that is possible. I'm quite new to polymer and am in an experimenting phase however if anyone can point me in the right direction to get me on the right track with this layout that would be great! Thanks!</p>