Making the left paperDrawerPanel reacting to responsive width

[addyosmani]

From @gedw99 on October 12, 2015 11:7

We are trying to make the drawer respond a bit differently from what it does in the demo

We have the same menu buttons in the top menu & the left drawer panel.
We want this behaviour.
  when desktop mode (responsiveWidth > 300px):
    - hide hamburger, and hence the left drawerPanel
    - show the top menu
  when mobile mode (responsiveWidth < 300px):
    - show hamburger, and hence on press the left drawerPanel
    - hide the top menu

at the moment the only event i can tap into is:
addEventListener('paper-responsive-change', function(e)
This is after the event, but i really need to get access to the before event

I am wondering if someone can recommend an approach.

Copied from original issue: Polymer/polymer-starter-kit#432

[mbecker]

Hi,

please try the following:

• Add id="drawer" to your drawer

<paper-drawer-panel id="paperDrawerPanel" right-drawer responsive-width="668px">
      <!-- Drawer Scroll Header Panel -->
      <paper-scroll-header-panel drawer fixed id="drawer">

• Add the following meadia query to main.css

@media (min-width: 668px) {
   #main.paper-drawer-panel {
        right: 0px!important;
    }
    #drawer {
        display: none;
    }
}

(Please notice that I'm using here "right-drawer; changing "right: 0px!important" to "left: 0px!important" should do the trick).

Does it work?