title: Angular material side nav style not working properly
body: <p>I'm trying to create a new app using both angular and angular-material. I have used the latest version of both angular and angular-material. I have created a login screen and made the side nav to appear only in a mobile view. When the screens loads initially in the mobile view all the side nav links seems to be displayed with out any style. But once I logged in and logged out the links seems to appear good. Can some one guide me on how to fix this issue.</p>
  
  <p><a href="https://i.stack.imgur.com/dfipP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dfipP.png" alt="Side nav links crashed"></a></p>
  
  <p><a href="https://i.stack.imgur.com/tI76R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tI76R.png" alt="Side nav links looks good"></a></p>
  
  <pre><code>&lt;mat-sidenav-container class="sidenav-container"&gt;
    &lt;mat-sidenav #drawer class="sidenav" fixedInViewport="true"
        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
        [mode]="over"
        [opened]="false"&gt;
      &lt;mat-toolbar&gt;Menu&lt;/mat-toolbar&gt;
      &lt;mat-nav-list&gt;
        &lt;button mat-menu-item routerLink="/dashboard" *ngIf="isUserLoggedIn()" (click)="drawer.toggle()"&gt;&lt;mat-icon aria-label="dashboard"&gt;dashboard&lt;/mat-icon&gt;Dashboard&lt;/button&gt;
        &lt;button mat-menu-item routerLink="/reports" *ngIf="isUserLoggedIn()" (click)="drawer.toggle()"&gt;&lt;mat-icon aria-label="reports"&gt;bar_chart&lt;/mat-icon&gt;Reports&lt;/button&gt;
        &lt;button mat-menu-item routerLink="/home" *ngIf="!isUserLoggedIn()" (click)="drawer.toggle()"&gt;&lt;mat-icon aria-label="home"&gt;home&lt;/mat-icon&gt;Home&lt;/button&gt;
        &lt;button mat-menu-item routerLink="/home?#features" *ngIf="!isUserLoggedIn()" (click)="drawer.toggle()"&gt;&lt;mat-icon aria-label="features"&gt;apps&lt;/mat-icon&gt;Features&lt;/button&gt;
        &lt;button mat-menu-item routerLink="/home?#services" *ngIf="!isUserLoggedIn()" (click)="drawer.toggle()"&gt;&lt;mat-icon aria-label="services"&gt;star_border&lt;/mat-icon&gt;Services&lt;/button&gt;
        &lt;button mat-menu-item routerLink="/home?#pricing" *ngIf="!isUserLoggedIn()" (click)="drawer.toggle()"&gt;&lt;mat-icon aria-label="pricing"&gt;monetization_on&lt;/mat-icon&gt;Pricing&lt;/button&gt;
        &lt;button mat-menu-item routerLink="/home?#aboutus" *ngIf="!isUserLoggedIn()" (click)="drawer.toggle()"&gt;&lt;mat-icon aria-label="about_us"&gt;info&lt;/mat-icon&gt;About Us&lt;/button&gt;
        &lt;button mat-menu-item routerLink="/home?#contactus" *ngIf="!isUserLoggedIn()" (click)="drawer.toggle()"&gt;&lt;mat-icon aria-label="contact_us"&gt;person_pin&lt;/mat-icon&gt;Contact Us&lt;/button&gt;
      &lt;/mat-nav-list&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content&gt;
      &lt;mat-toolbar color="primary" *ngIf="isUserLoggedIn()"&gt;
          &lt;button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"&gt;
            &lt;mat-icon aria-label="Side nav toggle icon"&gt;menu&lt;/mat-icon&gt;
          &lt;/button&gt;
          &lt;span&gt;&lt;img class="img-responsive" src="assets/images/logo.png" alt="logo"&gt;&lt;/span&gt;
          &lt;span class="example-spacer"&gt;&lt;/span&gt;
  
          &lt;mat-form-field class="search-bar"&gt;
            &lt;input matInput value=""&gt;
          &lt;/mat-form-field&gt;
  
          &lt;button mat-icon-button class="more-button margin-right" [matMenuTriggerFor]="notifications" aria-label="Toggle notifications"&gt;
            &lt;mat-icon aria-label="Notifications" matBadge="5" matBadgeColor="warn"&gt;notifications&lt;/mat-icon&gt;
          &lt;/button&gt;
          &lt;mat-menu #notifications="matMenu" xPosition="before"&gt;
            &lt;button mat-menu-item&gt;Notification 1&lt;/button&gt;
            &lt;button mat-menu-item&gt;Notification 2&lt;/button&gt;
            &lt;button mat-menu-item&gt;Notification 3&lt;/button&gt;
            &lt;button mat-menu-item&gt;Notification 4&lt;/button&gt;
            &lt;button mat-menu-item&gt;Notification 5&lt;/button&gt;
            &lt;mat-divider&gt;&lt;/mat-divider&gt;
            &lt;button mat-menu-item&gt;View all Notifications&lt;/button&gt;
          &lt;/mat-menu&gt;
  
          &lt;button mat-icon-button class="more-button" [matMenuTriggerFor]="account" aria-label="Toggle account settings"&gt;
            &lt;div mat-card-avatar class="example-header-image"&gt;&lt;/div&gt;
          &lt;/button&gt;
          &lt;mat-menu #account="matMenu" xPosition="before"&gt;
            &lt;mat-card class="example-card"&gt;
              &lt;mat-card-header&gt;
                &lt;mat-card-title&gt;Shiba Inu&lt;/mat-card-title&gt;
                &lt;mat-card-subtitle&gt;Dog Breed&lt;/mat-card-subtitle&gt;
              &lt;/mat-card-header&gt;
            &lt;/mat-card&gt;
            &lt;button mat-menu-item&gt;&lt;mat-icon aria-label="account details"&gt;account_circle&lt;/mat-icon&gt;Account&lt;/button&gt;
            &lt;button mat-menu-item&gt;&lt;mat-icon aria-label="account settings"&gt;settings&lt;/mat-icon&gt;Settings&lt;/button&gt;
            &lt;button mat-menu-item (click)="logout()"&gt;&lt;mat-icon aria-label="log out"&gt;power_settings_new&lt;/mat-icon&gt;Log out&lt;/button&gt;
          &lt;/mat-menu&gt;
        &lt;/mat-toolbar&gt;
        &lt;mat-toolbar color="primary" *ngIf="!isUserLoggedIn()"&gt;
            &lt;button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="(isHandset$ | async)"&gt;
              &lt;mat-icon aria-label="Side nav toggle icon"&gt;menu&lt;/mat-icon&gt;
            &lt;/button&gt;
            &lt;span&gt;&lt;img class="img-responsive" src="assets/images/logo.png" alt="logo"&gt;&lt;/span&gt;
            &lt;a mat-button *ngIf="!(isHandset$ | async)" routerLink="/home"&gt;Home&lt;/a&gt;
            &lt;a mat-button *ngIf="!(isHandset$ | async)" routerLink="/home?#features"&gt;Features&lt;/a&gt;
            &lt;a mat-button *ngIf="!(isHandset$ | async)" routerLink="/home?#services"&gt;Services&lt;/a&gt;
            &lt;a mat-button *ngIf="!(isHandset$ | async)" routerLink="/home?#pricing"&gt;Pricing&lt;/a&gt;
            &lt;a mat-button *ngIf="!(isHandset$ | async)" routerLink="/home?#aboutus"&gt;About us&lt;/a&gt;
            &lt;a mat-button *ngIf="!(isHandset$ | async)" routerLink="/home?#contactus"&gt;Contact us&lt;/a&gt;
            &lt;span class="example-spacer"&gt;&lt;/span&gt;
            &lt;a mat-button class="out-line-button" routerLink="/login"&gt;Sign In&lt;/a&gt;
        &lt;/mat-toolbar&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>below is the css for the componnt</p>
  
  <pre><code> .sidenav-container {
        height: 100%;
      }
  
      .sidenav {
        width: 200px;
      }
  
      .sidenav .mat-toolbar {
        background: inherit;
      }
  
      .mat-toolbar.mat-primary {
        position: sticky;
        top: 0;
        z-index: 1;
        box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
      }
  
      .example-icon {
        padding: 0 14px;
      }
  
      .example-spacer {
        flex: 1 1 auto;
      }
  
      .example-header-image {
        background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
        background-size: cover;
      }
  
      .margin-right {
        margin-right: 16px;
      }
  
      .search-bar {
        width: 40%;
      }
  
      .img-responsive {
        width: 50px;
        height: 50px;
      }
  
      .out-line-button {
        border: 2px solid white;
      }
  </code></pre>