Navigation drawer - Mini variant behavior

[Daugoh]

Feature request:

Add the "Mini variant" behavior of the Navigation drawer.
As defined in the Google Material guidelines:
https://material.google.com/patterns/navigation-drawer.html#navigation-drawer-behavior

What is the expected behavior?

When toggled, the navigation drawer change its width.
It's not fully hidden.

What is the current behavior?

Only two states are available: displayed, hidden

What are the steps to reproduce?

Create a sidenav and toggle it on and off.
The sidenav can only be opened or closed.
No intermediate state.

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

Desktop users need to quickly change the current view.
The sliding effect of the sidenav could be annoying when used a lot.
It's common for desktop apps to keep the navigation opened by default.
But in some cases the icons are self explanatory so no need to display the associated labels.

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

Angular2

Is there anything else we should know?

A similar feature request was submitted for Angular 1:
angular/material#3158

[jelbourn]

Is there any reason you couldn't control the width of the sidenav with css and toggle classes based on which width you want to display?

[Daugoh]

Hello @jelbourn

Thanks for your answer.

Yes I tried to do it manually.
I can show/hide the texts with a CSS class or use a ngIf.
It works but then I have a problem of alignment for my icons.
They are not correctly centered.

So yes we can do it ourselves but I think it would be really useful to have it natively.
And then just use an attribute like textVisible or iconOnly for instance ...

Regards

[kuncevic]

Is that feature has being planned yet? Is there any deadlines on that?

@Daugoh have you come up with any proper soulution for this one?

Here is #2021 one of the ways http://plnkr.co/edit/LcRDIHNFjHKLFTaMdNEM?p=preview of doing that

[MrNikunjPatel]

Probably, You can manage it buy css for intermediate state as below. You might need some css overrides as per need.

<md-sidenav-layout fullscreen> <md-sidenav #sidenav> <md-nav-list> <a md-list-item (click)="sidenav.toggle()"> <md-icon md-list-icon>menu</md-icon> </a> <a md-list-item *ngFor="let view of views"> <md-icon md-list-icon>{{view.icon}}</md-icon> <span md-line>{{view.name}}</span> </a> </md-nav-list> </md-sidenav> <app-contacts></app-contacts> </md-sidenav-layout>

/*left sidenav style override*/ md-sidenav { background-color: #f8921e; overflow: hidden; } md-nav-list a[md-list-item] { color: #fff; } md-nav-list a[md-list-item] .md-list-item{ padding: 0 10px !important; } .md-sidenav-over.md-sidenav-closed md-nav-list a[md-list-item] .md-list-text { display: none !important; } md-sidenav.md-sidenav-closed { transform: translate3d(0, 0, 0) !important; visibility: visible !important; min-width: 40px !important; }

[Daugoh]

@kuncevic
So far I'm just using a quick workaround with a ngIf to show/hide the text

[vtolstov]

Any news?

[vtolstov]

@rajamarketing can you help me and provide css with @media query so i don't need to watch in angular componnet for window resize events and css applied automatic?

[brunoracosta]

Hi people, news?

[Stoom]

from @rajamarketing comment here is what I've come up with, be it sass complains but it compiles...

    md-sidenav {
        width: 200px;

        md-icon {
            padding-right: 20px !important;
        }

        &.mat-sidenav-closed {
            transform: translate3d(0, 0, 0) !important; 
            visibility: visible !important;
            min-width: 64px !important;
            width: 64px !important;

            &~ /deep/.mat-sidenav-content {
                margin-left: 64px !important;
            }
        }
    }
}

[unstephenk]

Any updates?

[JanOschii]

Seems like @daxsom has a solution.
Any chance to get this with the next stable release?