CODEWITHSUNDEEP
polymerpolymer-1.0polymer-starter-kit
Snewedon
Snewedon

Reputation: 2460

Polymer app-drawer opening the page with it hidden

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

Upvotes: 1

Views: 2186

Answers (2)

tony19
tony19

Reputation: 138266

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

Upvotes: 0

Alan D&#225;valos
Alan D&#225;valos

Reputation: 2698

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>

Upvotes: 10

Related Questions