Polymer app-drawer opening the page with it hidden

1
votes

I've installed a new Polymer Starter Kit, and have the code below.

<app-drawer-layout fullbleed>

      <!-- Drawer content -->
        <app-drawer>
          <app-toolbar>

How can I make the app-drawer element be closed when the layout loads?

If i trigger .close() on the element when should I run this? It won't work for ready or attatched life cycle callbacks

But that would mean the menu opens and closes which i would like to avoid, what i really want to happen is when the page loads the menu is closed,

when I get a callback from the server to say the user is authenticated then call

this.$.menu.open() // where i've given app-drawer the if of menu
2
polymerpolymer-1.0polymer-starter-kit

2 Answers

10
votes

If what you want is to not display the drawer no matter the viewport width unless the user interacts, all you need to do is to set the app-drawer-layout's forceNarrow property to true like this:

<app-drawer-layout fullbleed force-narrow>
  <!-- Content -->
</app-drawer-layout>
0
votes

I'm assuming this is a follow up to: Polymer 1.0 App-Drawer - Uncaught TypeError when not rendered via dom-if

Given:

<app-drawer-layout id="layout" fullbleed>
  <app-drawer id="drawer">
  ...
  </app-drawer>
</<app-drawer-layout>

You could set the <app-drawer>.hidden property and then <app-drawer-layout>.resetLayout() based on the new value of signedIn, using an observer:

Polymer({
  ...
  properties : {
    signedIn: {
      type: Boolean,
      value: false,
      observer: '_signedInChanged'
    }
  },
  _signedInChanged: function(signedIn) {
      this.$.drawer.hidden = !signedIn;
      this.$.layout.resetLayout();
  }
);

codepen