title: How to impliment a sidenav Navigation drawer with a (Mini variant)
body: <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="nofollow noreferrer"><img src="https://i.stack.imgur.com/5cFAH.png" alt="Image" /></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=&quot;side&quot; 
        opened=&quot;true&quot;
        style=&quot;min-width:50px; background: #F3F3F3;&quot;
        class=&quot;shadow_right&quot; 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=&quot;min-width:60px;&quot;&gt;
  
    &lt;mat-list-item *ngFor=&quot;let page of Menus&quot;&gt; 
      &lt;a routerLink=&quot;{{page.link}}&quot; routerLinkActive=&quot;active&quot; 
        [routerLinkActiveOptions]=&quot;{exact:true}&quot; matLine&gt;
        &lt;mat-icon class=&quot;home_icon collapse-icon vcenter&quot; mat-list-icon&gt;{{page.icon}}&lt;/mat-icon&gt;
        &lt;span *ngIf=&quot;!showFiller&quot;&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)=&quot;showFiller = !showFiller&quot; mat-raised-button&gt;
    &lt;mat-icon *ngIf=&quot;!showFiller&quot;&gt;chevron_right&lt;/mat-icon&gt;
    &lt;mat-icon *ngIf=&quot;showFiller&quot;&gt;chevron_left&lt;/mat-icon&gt; 
  &lt;/button&gt;
  </code></pre>
  <h3>And gives me this unexpected result</h3>
  <p><a href="https://i.stack.imgur.com/vOVVn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vOVVn.png" alt="Result screenshoot" /></a></p>
  <p>After I click to view the mini bar
  <a href="https://i.stack.imgur.com/N8k6g.png" rel="nofollow 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="nofollow noreferrer"><img src="https://i.stack.imgur.com/BHTAQ.png" alt="Google devtools console +review" /></a></p>
  <p>Any help to solve this is gonna be useful.</p>
  <p>Thanks</p>