Components: Allow for sidenav to collapse horizontally but leaving an icon nav visible

[xiki808]

Bug, feature request, or proposal:

feature request

What is the expected behavior?

Once the sidenav is closed, a portion of it will still remain visible. Very similar to WordPress' admin menu, where the sidenav shows text and an icon for each menu item, and the same sidenav can be closed, leaving the icons only showing.

What is the current behavior?

Sidenav totally hides once the toggled to close.

What are the steps to reproduce?

The way I go around this is to override the translation in md-sidenav.md-sidenav-closed and md-sidenav.md-sidenav-closing css classes, keeping the sidenav still partly visible. That's fine, but in order to slide the content box with the new translation of sidenav, I had to animate the content box, for which I am pretty sure this can be done in a better way or in-house, within the sidenav component, thus adding this type of feature as a quick option.
Please check my plunker to see what I mean with the above.
http://plnkr.co/edit/LcRDIHNFjHKLFTaMdNEM?p=preview

What is the use-case or motivation for changing an existing behavior?

Mainly I would like to know the proper way to do this, if there is a better way than having to animate the content box. But it would also be great if this feature is added to sidenav component so we can quickly set an option to make collapsing act like explained.

Which versions of Angular, Material, OS, browsers are affected?

Angular: 2.1.1
Material: alpha-10
chrome

[chouclee]

1728 I think this is what you want.

[xiki808]

Yes precisely. I was missing the 'drawer' keyword

[jelbourn]

@mmalerba has a proposal for this already; it's something we'd like to add after beta

[Ravi-Rajpurohit]

this may help ..
https://github.com/Ravi-Rajpurohit/mini-md-sidenav

[AyushiSrivastava20]

@Ravi-Rajpurohit so can push mode work for your code?

[matte00]

@jelbourn

@mmalerba has a proposal for this already; it's something we'd like to add after beta

Any news in RC?

[willshowell]

Sounds like a dupe of #1728

[George35mk]

I have solved this try this code is pure typescript.

https://stackoverflow.com/questions/48479524/how-to-impliment-a-sidenav-navigation-drawer-with-a-mini-variant/49884854?noredirect=1#comment90117208_49884854

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}