How to change width of a Sidenav in Angular Material Design?

The answer submitted by user3587412 allowed me to change the width but I was having the same problem as Craig Shearer with it killing the animation. So I tried a few different things and came up with this.

 md-sidenav.md-locked-open {
   width: 250px;
   min-width: 250px;
   max-width: 250px;
 }

I'm not sure if that is the proper way but it seemed to work for me.

In angular material, md-sidenav has these attributes:

width: 304px;
min-width: 304px;

That's why the width will be fixed at 304 px no matter what device you use. So if you want to change your sidenav width you'll have to change the css a bit.

If you're fine with supporting only modern browsers, you can change it to a vw measure (1/100th of the viewport width) and add it to a separate css file. The code will look something like this:

md-sidenav, 
md-sidenav.md-locked-open, 
md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 200px !important;
    width: 85vw !important;
    max-width: 400px !important;
} 

Here's a plunker: http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview