How to impliment a sidenav Navigation drawer with a (Mini variant) : <p>Angular material 2 community I need your help how to make mini variant like google material design example in angular Material 2.</p>

<p>I try to implement this but I can't make this happen </p>

<p><a href="https://i.stack.imgur.com/5cFAH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5cFAH.png" alt="enter image description here"></a></p>

<h3>My code so far</h3>

<pre><code>  &lt;!-- ===================================================================== --&gt;
  &lt;!-- SIDENAV &amp;&amp; SIDENAV CONTAINER --&gt;
  &lt;!-- ===================================================================== --&gt;
  &lt;mat-sidenav-container&gt;

    &lt;mat-sidenav 
      #adminNavMenu 
      mode="side" 
      opened="true"
      style="min-width:50px; background: #F3F3F3;"
      class="shadow_right" autosize&gt;

      &lt;!-- MENU LEFT --&gt;
      &lt;app-admin-menu-left&gt;&lt;/app-admin-menu-left&gt;

    &lt;/mat-sidenav&gt;

   &lt;mat-sidenav-container&gt;
</code></pre>

<h3>app-admin-menu-left.html</h3>

<pre><code>&lt;mat-nav-list style="min-width:60px;"&gt;

  &lt;mat-list-item *ngFor="let page of Menus"&gt; 
    &lt;a routerLink="{{page.link}}" routerLinkActive="active" 
      [routerLinkActiveOptions]="{exact:true}" matLine&gt;
      &lt;mat-icon class="home_icon collapse-icon vcenter" mat-list-icon&gt;{{page.icon}}&lt;/mat-icon&gt;
      &lt;span *ngIf="!showFiller"&gt;
        {{page.name}}
      &lt;/span&gt;
    &lt;/a&gt;
  &lt;/mat-list-item&gt;


&lt;/mat-nav-list&gt;

&lt;button  mat-icon-button (click)="showFiller = !showFiller" mat-raised-button&gt;
  &lt;mat-icon *ngIf="!showFiller"&gt;chevron_right&lt;/mat-icon&gt;
  &lt;mat-icon *ngIf="showFiller"&gt;chevron_left&lt;/mat-icon&gt; 
&lt;/button&gt;
</code></pre>

<h3>End gives me this unexpected result</h3>

<p><a href="https://i.stack.imgur.com/vOVVn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vOVVn.png" alt="enter image description here"></a></p>

<p>After I click to view the mini bar
<a href="https://i.stack.imgur.com/N8k6g.png" rel="noreferrer"><img src="https://i.stack.imgur.com/N8k6g.png" alt="enter image description here"></a></p>

<blockquote>
  <p>As you see there is a margin 250 px on <code>mat-sidenav-content</code> but I can't access this element.</p>
</blockquote>

<p><a href="https://i.stack.imgur.com/BHTAQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BHTAQ.png" alt="enter image description here"></a></p>

<p>Any help to solve this is gonna be useful. </p>

<p>Thanx</p>
