Alright, so as I see it, the proper element nesting for paper-drawer-panel
should be something like this:
<paper-drawer-panel>
<paper-header-panel drawer>
<!-- Side bar content -->
<paper-menu>......</paper-menu>
</paper-header-panel>
<paper-scroll-header-panel main>
<paper-toolbar class="tall">
</paper-toolbar>
<div class="main-content">
<!-- Main app body content here -->
</div>
<!-- Main body content -->
</paper-drawer-panel>
The above hierarchy will give you something like this (current template for site I'm working on):
However this is what I am trying to achieve:
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:
<paper-scroll-header-panel condenses keep-condensed-header>
<paper-toolbar class="tall">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div class="flex"></div>
<div class="bottom title">Dom Farolino</div>
</paper-toolbar>
<div class="content">
<paper-drawer-panel>
<paper-header-panel mode="scroll" drawer>
<paper-toolbar id="navheader" class="tall">
<img class="middle profile" hidden>
<div class="bottom layout vertical">
<span>Dom Farolino</span>
<span>[email protected]</span>
</div>
</paper-toolbar>
<paper-menu class="list">
<paper-item>New item here</paper-item>
<paper-item>New item here</paper-item>
</paper-menu>
</paper-header-panel>
<div main>
<content id="objects" select="*"></content>
</div>
</paper-drawer-panel>
</div>
</paper-scroll-header-panel>
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 paper-drawer-toggle
is not even in the paper-drawer-panel
component. Also any components placed inside this larger component that appear inside the <content>
component are not placed properly inside the body.
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 <paper-drawer-panel>
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!