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: https://github.com/angular/material/issues/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 https://github.com/angular/material2/issues/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 #sidenav>

menu {{view.icon}} {{view.name}}

</md-sidenav>
<app-contacts></app-contacts>

`

/*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?

[Misiu]

firebase and google analytics has this functionality. It would be awesome to have this build in and working by default

[rui-cruz]

yes pls!

[Ravi-Rajpurohit]

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

[liri2006]

Would be extremely helpful to have this as a native feature. As for now it requires some hacky css to make it work both for desktop (mini-sidenav) and mobile (classic one), which are breaking with almost every release :)

[matte00]

Any news?

[haskelcurry]

Yes, any news, please?

[morten-kirstein]

could be on the steps. I mentioned it to Thomas Burleson from the Angular Material team at Angular Connect. He said it shouldn't take long to make. Meanwhile, we could use the CSS hack method.

I'll just follow up on it.

[51Ray]

I hope and expect...

[AyushiSrivastava20]

any stable release with these changes?

[Melanie-M]

Thanks to https://github.com/angular/material2/pull/8488 you can now use autosize in mat-sidenav-container, so you can resize the sidenav without css hacks.

Here's an example adapted from the "autosize sidenav" example: https://stackblitz.com/edit/angular-b4gmby

[mackelito]

@Melanie-M so just a question... If a remove "autosize"... I still see the same result?

[Melanie-M]

@mackelito I think without autosize the main content doesn't resize properly, the sidenav overlaps it instead. But so depending on what behavior you want, I guess it can work without autosize

[gangsthub]

Answering @jelbourn's comment from 2 years ago. It cannot be achieved easily with css: mat-sidenav-content gets it's margin-left from mat-sidenav and you have to add the autosize to the mat-sidenav-container (wich adds perf issues) and even if you hide manually the mat-list-item's labels, there are no fancy animations on the icons/labels out-of-the-box. I think this should be the library's responsibility, not user's (because you have to override a lot of css if you want to avoid the autosize attr, enable the animations, etc. on your own, being this decisions not future-proof)

[isrmicha]

must have feat

[rellis-of-rhindleton]

If autosize causes performance problems -- which isn't surprising if it makes the size get rechecked on every change cycle -- can we just get a method that will force resize manually?

The code is already in the component to do all the work, and we (usually) know when we want to make it resize. Seems fair to just expose a way to force it to happen when needed, and not bother with having it check all the time.

FWIW, we're getting around this by (at time to resize) turning on autosize via a ViewChild reference, then turning it off again a second later via setTimeout. It's hacky though.

[kyusupov33]

must have :)

[adamdyson]

I am just going to leave this here in the hope that similar features are introduced in Angular. https://vuetifyjs.com/en/components/navigation-drawers#example-mini

[ghost]

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

[Harkiratsingh026]

You can also check this link: https://medium.com/@harkiratsingh.026/angular-6-mini-variant-drawer-d5326be55dd1

[IlCallo]

@jelbourn are you guys open for a PR about this? Not easy to pinpoint the specs because in current Material Design guidelines the "mini" variant is nowhere to be found, but if you tell me old specs are ok, I can try a PR which just defines a 'mini' status with user-defined width value (with sensible default values).

This issue actually proposed some kind of API for it already #9640

[jelbourn]

At this point we would probably hold off on the mini variant to check with the Material Design team to see if they plan for this to still be part of the canon.

[Misiu]

@jelbourn any news from Material Design Team?

[malcaESayYes]

in css: /deep/.mat-drawer.mat-drawer-end[ng-reflect-opened=false]{ left: 35px !important; visibility: visible !important; }

it working!!!

but in prod - no....

[mackelito]

try this instead ::ng-deep .mat-drawer.mat-drawer-end[ng-reflect-opened=false]{

[zipporaSay]

ng-reflect-opened property not appearing in prod - after build (im wrote the last answer)

[mackelito]

@zipporaSay I would suggest you to have your own selector. When you close it add class "closed" an use that selector instead

[IlCallo]

/deep/ and ::ng-deep are deprecated because they break incapsulation, not really a good solution IMHO... Also, just setting the sidenav width should suffice to get what you're trying to do with that CSS

[mackelito]

Are there other ways to force styles to components outside the material components?

[IlCallo]

Not from a component to another AFAIK You should use global CSS rules (aka non-scoped CSS) for that, even if it's a lot less maintenable because it moves some rules relative to a component outside the component folder/files

[danielheddelin]

Okay, so it's been a little over 2 years. Any core team member who would like to comment on this?

[Tyler-V]

...this would be nice!

[Fourie-r]

+1 Must have here. Thanks

[Lakston]

Same here, we need this.

[S-amuel]

This is a good request, Any updates?

edit: Ravi-Rajpurohit's & Harkiratsingh026's links work great

[lramondev]

2 This is a good request, Any updates?

[EagleInNight]

Any updates? Need this

[Rodrigo54]

the angular materials team is working together with the angular core team to launch the ivy compiler, do not expect any new feature until the ivy be released

[jelbourn]

(I'm going through the highest voted issues today an commenting on their status)

We still consider this something that we want to add, but it's still one of the lower-priority features in the backlog (compared to things like virtual scrolling for table, density theming, improving CDK documentation, etc.). As I mentioned in my recent ng-conf talk, we're doing some work now to integrate MDC Web into our components, so we would likely hold off on working on this until we have a better idea of what the MDC-based sidenav would look like.

[mackelito]

@jelbourn just so that we can get a grasp of what is to come and what is priority.. Is https://github.com/angular/components/projects/25 "up to date"?

Also how many devs are currently focusing on angular components?