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

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