Components: Ideas / Wishes for the SideNav

[SvenBudak]

I am a big fan of the Material2 Framework for Angular2. I Design now the Frontend of a couple of pages with this. But one thing is very frustrating for me and some of my friends. (We are just UX / Frontend Designers with very basic knowledge about Angular2)

We all need to ask every time programmers for making us the toggle function available in other components... This costs every time hours of time. isn't it possible, that you guys make a global Service for a important function like the SideNav? I mean nearly 100% of the people will need a global Toggle Function... I really really hope for any solution in future. :)

The other thing is, that we absolutely need a way, to use multiple SidenNvs from same directions. (align="end") In some projects, this is really needed, to improve the usability and user experience.

And the last wish is, a option to make the content area "sticky" when the Sidebar is open. It feels very strange, when i scroll the sidebar and the whole content scrolls to.

Sorry for my bad english. I hope very much, that you think about applying my Ideas / Wishes. :)

Very best regards!
BamiGorengo

[wiwski]

Any workaround for the "sticky" sidenav?

[willshowell]

@wiwski what worked for me was to examine the markup and css of material.angular.io/components. It's definitely possible and not too tricky, but requires some digging. It could use some documentation as it's likely the standard way of using sidenavs.

@BamiGorengo I personally disagree that a global toggle service should be Material's responsibility. It's pretty straightforward (not even 15 lines) to add a global service that exposes a toggle subject. Subscribe to that in your component and do mySidenav.toggle() each time the toggle subject emits.

[wiwski]

@willshowell I ended up setting html, body, md-sidenav-container { height: 100% } and it works just fine for me 👍

[axtho]

+1 for some documentation (to save time digging)

[mackelito]

@willshowell perhaps the docs could mention this as a "Pro tip" and show some basic implementation code?

[axtho]

Now that the fixedInViewport="true" feature is there the problem is (almost) solved. I have a request for one more option that is not implemented in the demo app: fixed sidenav that covers the header, but the scrolling content start underneath the header ... i.e. the header ist fixed also.

Now, you can achieve this by setting the toolbar on top of the sidenav-container. Works. But, what if I want the sidenav cover the entire top to bottom, and the main toolbar also fixed, with the scrolling content underneath. There seems to be no way to achieve this. @mmalerba