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}}

Basic Usage

- {{#paper-button onClick=(action "toggleSourceCode") iconButton=true}} + {{#paper-button onClick=(action "toggle" "showSourceCode") iconButton=true}} {{paper-icon icon="code"}} {{/paper-button}} {{/paper-toolbar-tools}} @@ -38,7 +38,7 @@

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}} +

Persistent Sidenav

+ + {{#paper-button onClick=(action "toggle" "persistentCode") iconButton=true}} + {{paper-icon "code"}} + {{/paper-button}} + {{/paper-toolbar-tools}} + {{/paper-toolbar}} + +
+ {{code-snippet name="sidenav.hbs"}} +
+ +
+ {{! BEGIN-SNIPPET sidenav }} + {{#paper-sidenav-container class="inner-sidenav"}} + + {{#paper-sidenav + class="md-whiteframe-z2" + name="left2" + open=leftSideBarOpen2 + lockedOpen=leftSideBarLockedOpen + onToggle=(action (mut leftSideBarOpen2))}} + {{#paper-toolbar as |toolbar|}} + {{#paper-toolbar-tools}}Left Sidenav{{/paper-toolbar-tools}} + {{/paper-toolbar}} + {{#paper-content padding=true}} + Çup? + {{/paper-content}} + {{/paper-sidenav}} + + {{#paper-card-content class="flex"}} +
+

+ 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}} + +
+ {{/paper-card-content}} + + {{/paper-sidenav-container}} + {{! END-SNIPPET sidenav }} +
+ +{{/paper-card}} + {{paper-api (p-section (p-row "position" "`'left'` | `'right'`" "Pass in the string `'left'` or `'right'` to place the sidenav accordingly.")