title: Angular 4 material Sidenav doesn't close the menu after being selected
body: <p>I'm using the <a href="https://material.angular.io/components/sidenav/overview" rel="nofollow noreferrer">angular Material Sidenav</a> it works well but with the problem that after select an option the menu still opens. It's so weird that this is mean to use as a navigation for small devices and the doc doesn't have any example using links</p>
  
  <p><strong>App.component</strong></p>
  
  <pre><code>&lt;md-sidenav-container&gt;
       &lt;md-sidenav #sidenav class="sidenav" mode="over"&gt;
      &lt;ul class="sidenav"&gt;
        &lt;li class="sidenav__list"&gt;
          &lt;a class="sidenav__list__link " [routerLink]="['about']" &gt;about&lt;/a&gt;
        &lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/md-sidenav&gt;
  
    &lt;header&gt;
      &lt;div fxHide fxShow.lt-sm&gt;
        &lt;button class="btn__sidenav" md-button (click)="sidenav.toggle()"&gt;
          &lt;i class="material-icons md-36"&gt;menu&lt;/i&gt;
        &lt;/button&gt;
      &lt;/div&gt;
  
      &lt;/ng-template&gt;
    &lt;/header&gt;
  
  
      &lt;div class="container"&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
      &lt;wh-footer&gt;&lt;/wh-footer&gt;
  &lt;/md-sidenav-container&gt;
  </code></pre>
  
  <p>basically, I have to load content for the about page and close the menu when the link is clicked, I dont know if I have to do manually or are there any directive or property that I can use  </p>