How to get the app-drawer in Polymer starter-kit to toggle

1
votes

Edit: The code is here https://github.com/PolymerElements/polymer-starter-kit (I just ran polymer init as per the readme instructions)

When I try using 

<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>

Like in the docs, the button disappears. When I try using

<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>

The button reappears but doesn't work.

I've tried following some other examples like using onclick=drawer.toggle() in the tag, but I don't know how/where to define drawer. The same goes for trying to use 

document.querySelector('paper-icon-button').addEventListener('tap', function() {
      drawer.toggle();
    });

It's a local DOM, so I need to get around that somehow. When I try using var drawer = this.$$('app-drawer') or this.$.'app-drawer' or any other syntax I could copy and paste, I just get errors. I'm clearly a newbie to Polymer, and after a good 6 hours of playing with this I'm lost and could use some guidance.

2
javascriptpolymerpolymer-starter-kit
can we see your code. So that we know how/where you are using it – a1626
I added the code, thanks for responding! – Bobby Battista

2 Answers

1
votes

It turns out the drawer-toggle is disabled for big screens, so while developing on a laptop, the whole button will disappear. To get it back, you need to use force-narrow in the app-drawer-layout tag. It's also worth noting that the documentation doesn't list attributes you can use in the tags, it only lists properties... but you can just convert properties into attributes by switching from camelCase to using-dashes. forceNarrow becomes force-narrow. I found this here: https://github.com/PolymerElements/app-layout/issues/218

0
votes

You should declare in the paper-icon-button the on-tap event to handle the drawer:

<paper-icon-button icon="menu" on-tap="_toggleDrawer" aria-label="Menu"> </paper-icon-button>

Then in your app-drawer you should reflect te property drawerOpened so it can open or close it:

<app-drawer opened="{{drawerOpened}}" swipe-open tabindex="0">

And finally declare the _toggleDrawer function like this to change de value of the app-drawer opened property:

_toggleDrawer: function() {
    this.drawerOpened = !this.drawerOpened;
  }

Hope it helps