title: Auto close Material Sidebar right after clicking on nav item is not working
body: <p>I need to auto close Material Sidebar right after navigation by clicking on Sidebar nav items. but it seems it isn't working naturally in that way. 
  I'm creating Stackblitz for my issue:</p>
  
  <p>Stackblitz Editor Site:
  <a href="https://stackblitz.com/github/adnanebrahimi/MaterialSidebarIssue" rel="nofollow noreferrer">https://stackblitz.com/github/adnanebrahimi/MaterialSidebarIssue</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;mat-sidenav #drawer class="sidenav" fixedInViewport
   [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
   [mode]="(isHandset$ | async) ? 'over' : 'side'"
   [opened]="(isHandset$ | async) ? 'false' : 'true'"&gt;
  </code></pre>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>export class SidebarLayoutComponent {
  
    isHandset$: Observable&lt;boolean&gt; = 
    this.breakpointObserver.observe(Breakpoints.Handset)
     .pipe(
           map(result =&gt; result.matches)
          );
  
    constructor(private breakpointObserver: BreakpointObserver) {}
  
  }
  </code></pre>
  
  <p>We have <code>isHandset$</code> as Observable to determine that the device is handset or not by this feature we just open it if it's false and close it if it's true to be a handset.
  But I want also to close the sidebar when we start navigating on other pages.</p>
  
  <p>Thank you.</p>