<script src="http://www.polymer-project.org/platform.js"></script>

<link rel="import" href="http://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html">

<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">

<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">

​

<style>

  [drawer] {

    background-color: white;

    border-right: 1px solid #ccc;

  }

  .content {

    margin: 60px;

  }

​

  footer {

    position: fixed;

    background: red;

    width: 100%;

    padding: 15px;

    bottom: 0;

    left: 0;

  }

</style>

​

<core-drawer-panel>

  <core-header-panel drawer>

    <core-toolbar></core-toolbar>

    <div> Drawer content... </div>

  </core-header-panel>

  <core-header-panel main>

    <core-toolbar>asdf</core-toolbar>

    <div fit class="content"> 

    <button onclick="document.querySelector('core-drawer-panel').togglePanel();">toggle drawer</button>

      <br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi

      <footer>

        Footer!

      </footer>

      </div>

  </core-header-panel>

</core-drawer-panel>

​