1

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.

Bobby Battista
  • 1,985
  • 2
  • 17
  • 27

2 Answers2

1

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

Bobby Battista
  • 1,985
  • 2
  • 17
  • 27
0

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

JpCrow
  • 4,881
  • 4
  • 32
  • 46
  • Reading from here though, "the toggle function in your script is not necessary, the toggle works out of the box using the paper-drawer-toggle attribute on the paper-icon-button element." Although, the word "paper" is missing from the code given in this starter-kit, it just says 'drawer-toggle' http://stackoverflow.com/questions/30714253/polymer-1-0-paper-drawer-panel-toggle-is-not-working – Bobby Battista Nov 26 '16 at 00:45
  • I'm also seeing here that this behavior is expected on a laptop - that the drawer-toggle only works on a small display. But using forceNarrow isn't working either... How can I test this button in development? https://github.com/PolymerElements/app-layout/issues/252 – Bobby Battista Nov 26 '16 at 00:58