diff --git a/addon/components/paper-sidenav-inner.js b/addon/components/paper-sidenav-inner.js index 8bb27ca3a..c181688f9 100644 --- a/addon/components/paper-sidenav-inner.js +++ b/addon/components/paper-sidenav-inner.js @@ -48,6 +48,13 @@ export default Component.extend(TransitionMixin, { this.updateLockedOpen(); }, + didReceiveAttrs() { + this._super(...arguments); + if (typeof FastBoot === 'undefined') { + this.updateLockedOpen(); + } + }, + willDestroyElement() { this._super(...arguments); $(window).off(`resize.${this.elementId}`); @@ -72,6 +79,7 @@ export default Component.extend(TransitionMixin, { if (coercedIsLockedOpen !== isLockedOpen) { this.set('isLockedOpen', isLockedOpen); + // if sidenav is open and we enter lockedOpen, // make the sidenav enter the "closed" state if (!this.get('closed') && isLockedOpen) { diff --git a/addon/templates/components/paper-sidenav.hbs b/addon/templates/components/paper-sidenav.hbs index df960151d..3f558644a 100644 --- a/addon/templates/components/paper-sidenav.hbs +++ b/addon/templates/components/paper-sidenav.hbs @@ -1,6 +1,5 @@ {{#unless closed}} {{paper-backdrop - isLockedOpen=isLockedOpen opaque=true class="md-sidenav-backdrop" onClick=(action "onBackdropTap")}} @@ -11,7 +10,6 @@ name=name position=position lockedOpen=lockedOpen - isLockedOpen=isLockedOpen closed=closed closeOnClick=closeOnClick onToggle=(action "onToggle")}} diff --git a/tests/dummy/app/controllers/demo/sidenav.js b/tests/dummy/app/controllers/demo/sidenav.js index f6b5cf73e..781228723 100644 --- a/tests/dummy/app/controllers/demo/sidenav.js +++ b/tests/dummy/app/controllers/demo/sidenav.js @@ -3,8 +3,8 @@ const { Controller } = Ember; export default Controller.extend({ actions: { - toggleSourceCode() { - this.toggleProperty('showSourceCode'); + toggle(propName) { + this.toggleProperty(propName); } } }); \ No newline at end of file diff --git a/tests/dummy/app/templates/demo/sidenav.hbs b/tests/dummy/app/templates/demo/sidenav.hbs index 53fc78c91..9f820c979 100644 --- a/tests/dummy/app/templates/demo/sidenav.hbs +++ b/tests/dummy/app/templates/demo/sidenav.hbs @@ -7,7 +7,7 @@ {{#paper-toolbar-tools}}
The left sidenav will "lock open" on a medium (>=960px wide) device.
- The right sidenav never "locks open" because we set lockedOpen=false
.
+ The right sidenav never "locks open" because we set lockedOpen=false
.
Left sidenav is {{if leftSideBarOpen "opened" "closed"}}. @@ -83,6 +83,62 @@ {{/paper-card}} +{{#paper-card}} + {{#paper-toolbar}} + {{#paper-toolbar-tools}} +
+ Another way of using the sidenav is to toggle the lockedOpen
state.
+ This corresponds to the "persistent sidenav" pattern in the material spec.
+
+ Left sidenav is {{if leftSideBarLockedOpen "locked" "unlocked"}}. +
+ + {{#paper-button raised=true onClick=(action "toggle" "leftSideBarLockedOpen")}} + {{if leftSideBarLockedOpen "Unlock" "Lock"}} left sidenav + {{/paper-button}} + +