Cannot read property 'opened' of undefined

[ebatgerel]

Description

When i use the app-layout throws error to console. But it works good before.

Here is my html structure

<app-drawer slot="drawer" swipe-open id="left">
      <section>
         <div id="dashboard" on-click="selectDashboard">Dashboard</div>
         <div id="users" on-click="selectUsers">Users</div>
         <div id="categoryTree"></div>
      </section>
</app-drawer>

onLayoutChange(wide) {
            let drawer = this.$.drawer;
            if (wide && drawer.opened) {
                drawer.opened = false;
            }
        }

Expected outcome

Should work

Actual outcome

Cannot read property 'opened' of undefined

Live Demo

Browsers Affected

• [x] Chrome
• [x] Firefox
• [x] Safari 9
• [x] Safari 8
• [x] Safari 7
• [x] Edge
• [x] IE 11
• [x] IE 10

[keanulee]

<app-drawer slot="drawer" swipe-open id="left"> means drawer = this.$.left; ($ node finding maps to element id).