How to close/open Polymer <app-drawer> through JavaScript

Question

I'm experimenting with the Polymer 2 starter kit. I'd like to open/close the App Drawer through JavaScript. I̶'̶m̶ ̶h̶a̶v̶i̶n̶g̶ ̶d̶i̶f̶f̶i̶c̶u̶l̶t̶y̶ ̶t̶o̶ ̶g̶e̶t̶ ̶a̶ ̶r̶e̶f̶e̶r̶e̶n̶c̶e̶ ̶t̶o̶ ̶t̶h̶e̶ ̶A̶p̶p̶ ̶D̶r̶a̶w̶e̶r̶.̶

My scenario is a custom account icon in place of the hamburger icon. The icon will reflect the login state. On icon click it should either activate a login dialog, when not logged in. Or, if already logged in, open the drawer to reveal some account options.

Ideally, the custom icon will also be used in other places. However without any on-click listeners, but purely as a login state indicator.

I got this setup working in a Material.io project, but would like to try and get this to work in Polymer.

Edit

The starter kit and <app-layout> examples all use a drawer-toggle property on the menu icon/button

I started out with onclick, according the first example at Polymer App Layout. This didn't work in my setup, where the App is itself an element as in Rob Dodson's post.

Then i came upon Polymer Events and used on-click. But could not figure out how to get a reference to the drawer in my callback. The Polymer App Layout example directly referenced drawer.toggle() which worked fine in Firefox, but not in Chrome.

After writing my Stackoverflow question i figured out the same method as in Niklas answer. Use an on-tab="toggleDrawer" set on menu icon/button. Then use this.$.drawer.toggle(); in the toggleDrawer method.

Niklas Niklas · Accepted Answer · 2018-04-06T09:47:26

Next time you should be providing some example code that users can understand what you have already achieved & what you are missing.

However, here is a simple app-drawer example:

<app-header reveals>
   <app-toolbar>
     <paper-icon-button icon="menu" on-tab="toggleDrawer"></paper-icon-button>
     <div main-title>My app</div>
  </app-toolbar>
</app-header>
<app-drawer id="drawer" swipe-open></app-drawer>

And the on-tab function would look like that:

toggleDrawer() {
  this.$.drawer.toggle();
}

Be aware that you will have to call super() in order to get your Polymer selector to work.

How to close/open Polymer <app-drawer> through JavaScript

Edit

1 Answers