Right sidenav (alone or together with left one) and locked-open sidenav

[rsaccon]

Is this possible ? The angular implementation does it, so I guess if the SCSS is partially borrowed from there, it should be doable.

[miguelcobain]

The current implementation locks the sidenav at a fixed viewport width (greater than 850px, overridable through css/sass). When we have sass in the consuming app, you can just override $locked-breakpoint: 850px; sass variable to something else.

The structure for a right sidebar would be identical to a left one:

{{#paper-nav-container}}

  {{#paper-content}}
    {{!-- your content here --}}
  {{/paper-content}}

  {{#paper-sidenav classNames="md-sidenav-right md-whiteframe-z2" flex-layout="column" flex=true}}
        {{!-- your sidenav content here --}}
  {{/paper-sidenav}}

{{/paper-nav-container}}

You can have two sidebars, yes. Just add it before paper-content with the md-sidenav-left. The problem is that their state is bound to their parent paper-nav-container component. So, if they're both inside the same paper-nav-container their state will always be the same.

The sidenav is the only component not ported from angular material. The reason is that they use a really complicated media query evaluation system and angular ngAnimate function, which isn't easy to port for ember. 😞
The good news is that I think our sidenav implementation is really clever. 😃

Hope it helped.

[rsaccon]

Thanks, your clarification helped, and yes, your sidenav implementation is really clever, so little lines of code compared to the angular one !

[miguelcobain]

@pixelhandler nailed it at https://github.com/pixelhandler/ember-off-canvas-components
I just adapted it to our needs with locking, material animation (which isn't complete, btw #41), etc.

Sorry for always mentioning you, @pixelhandler. 😆

[pixelhandler]

@miguelcobain cool, I'll checkout your adaptation (no need to be sorry). at the day job we use the off canvas component and have a really nice theme. so I'm interested in adding themes at some point.

[rsaccon]

So I tried to keep the sidenavbar always open by overriding $locked-breakpoint. However It is not straightforward. If just importing ember-paper scss in the app style scss file, it is not possible to overwrite it. I assumed $locked-breakpoint is defined in the variables file, so if importing all components separately, I could just overwrite it after importing the variables files, but unfortunately $locked-breakpoint is defined in the paper-sidenav.scss, so I had to insert the whole paper-sidenav source, to make the overwrite effective.
Maybe I am missing something and there is an easier way of doing what I did, otherwise I suggest to put the $locked-breakpoint into the variables file.

[miguelcobain]

Doing

@import 'ember-paper';

and after

$locked-breakpoint: your value;

doesn't work?

[rsaccon]

No, unfortunately not. Does it work for you ?
I have this npm dependencies:

"broccoli-autoprefixer": "^2.1.0",
"broccoli-sass": "0.3.3",

[miguelcobain]

@rsaccon

Please update ember-paper to 0.0.20 and use this in your sass file:

$locked-breakpoint: 450px;

@import 'ember-paper';

We need to assign values before importing ember-paper. Looks like this is the way to do it in sass.