title: SideNav using angular material
body: <p>I am creating sideNav for angular application and I am using angular material. I have the following code,</p>
  
  <pre><code>&lt;mat-toolbar class="example-header" color="primary"&gt;
          &lt;button  mat-button  mat-icon-button&gt;&lt;mat-icon&gt;menu&lt;/mat-icon&gt;&lt;/button&gt;
      &lt;span class="company-name"&gt;Yaana&lt;/span&gt;
  &lt;/mat-toolbar&gt;
  &lt;mat-sidenav-container&gt;
          &lt;mat-sidenav mode="side" opened="true"&gt;
              &lt;p&gt;&lt;span&gt;Dashboard&lt;/span&gt;&lt;/p&gt;
              &lt;p&gt;&lt;span&gt;Incidents&lt;/span&gt;&lt;/p&gt;
              &lt;p&gt;&lt;span&gt;Users&lt;/span&gt;&lt;/p&gt;
              &lt;/mat-sidenav&gt;
              &lt;mat-sidenav-content&gt;
                  Main Content
              &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>The output I am getting is,
   <a href="https://i.stack.imgur.com/JJRx1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JJRx1.png" alt="enter image description here"></a></p>
  
  <p>The Issues is,</p>
  
  <blockquote>
    <p>1) Both toolbar and side nav main content are getting overlapped.</p>
  </blockquote>
  
  <p>Please correct me where I am wrong.</p>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AgmCoreModule } from '@agm/core';
  import { MapsAPILoader } from '@agm/core';
  import { FormsModule } from '@angular/forms';
  import { GoogleMapsAPIWrapper } from '@agm/core';
  import { AppComponent } from './app.component';
  import 'hammerjs';
  import { MatToolbarModule } from '@angular/material/toolbar';
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  import {MatIconModule} from '@angular/material/icon';
  import {MatSidenavModule} from '@angular/material/sidenav';
  import {MatButtonModule} from '@angular/material/button';
  import {MatListModule} from '@angular/material/list';
  
  
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      BrowserAnimationsModule,
      MatToolbarModule,
      MatIconModule,
      MatSidenavModule,
      MatButtonModule,
      MatListModule
    ],
  exports: [
      MatSidenavModule,
      MatToolbarModule
    ],
    providers: [GoogleMapsAPIWrapper],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>I have tried the same code stackblitz, the first issue i.e navigation drawer is below toolbar is coming, but the same is not working in my local computer.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-4rjbvu" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-4rjbvu</a></p>