Toggle paper-drawer-panel inside paper-header-panel

I'm trying to use paper elements, and I played a bit with the different panels. I tried modifying the example from the documentation:

<paper-drawer-panel>
  <paper-header-panel drawer>
    <paper-toolbar><div>Application</div></paper-toolbar>
    <div> Drawer content... </div>
  </paper-header-panel>
  <paper-header-panel main>
    <paper-toolbar>
      <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
      <div>Title</div>
    </paper-toolbar>
    <div> Main content... </div>
  </paper-header-panel>
</paper-drawer-panel>

I want to have the drawer inside the header panel, so that the header take the whole width of the page.

Here is my attempt: (plunker)

  <body class="fullbleed layout vertical">
    <paper-header-panel>
      <paper-toolbar>
        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
        <paper-icon-button icon="menu" (click)="document.querySelector('#panel').togglePanel()"></paper-icon-button>
        <div>My app</div>
      </paper-toolbar>
      <paper-drawer-panel id="panel">
        <div drawer> drawer </div>
        <div main> main </div>
      </paper-drawer-panel>
    </paper-header-panel>
  </body>

Here, the drawer doesn't close. The buttons don't do anything. In my console, I can use $('#panel').togglePanel(), and I see it changing the selected attribute on the panel, but the drawer doesn't close. What's wrong with my code and how can I make the "menu" button close my drawer?

Edit: replaced $('#panel') by document.querySelector('#panel')

Solution

You were trying to use JQuery, here is the Javascript way of doing it:

replace:

(click)="$('#panel').togglePanel()"

with:

onClick="document.querySelector('#panel').togglePanel()"