title: side-nav is not working properly | Angular Material | Angular 7
body: <p>I have navigation component which made with angular material</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//COMPONENT TS FILE
  
  import { Component } from '@angular/core';
  import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
  import { Observable } from 'rxjs';
  import { map, filter } from 'rxjs/operators';
  import { MatDialog } from '@angular/material';
  import { LoginDialogComponent } from '../login-dialog/login-dialog.component';
  import { JoinDialogComponent } from '../join-dialog/join-dialog.component';
  import { NavigationEnd, Router } from '@angular/router';
  
  @Component({
    selector: 'app-navigation',
    templateUrl: './navigation.component.html',
    styleUrls: ['./navigation.component.scss']
  })
  export class NavigationComponent {
    navItems: Object = [
      { path: '/buy', text: 'Buy', active: false },
      { path: '/rent', text: 'Rent', active: false },
      { path: '/sell', text: 'Sell', active: false },
      { path: '/mortgages', text: 'Mortgages', active: false }
    ];
  
    isAuthorized = false;
    navExpand = false;
  
    isHandset$: Observable&lt;boolean&gt; = this.breakpointObserver
      .observe(Breakpoints.Handset)
      .pipe(map(result =&gt; result.matches));
  
    constructor(
      private breakpointObserver: BreakpointObserver,
      public dialog: MatDialog,
      private router: Router
    ) {
      this.router.events
        .pipe(filter(event =&gt; event instanceof NavigationEnd))
        .subscribe(res =&gt; {
          if (this.router.url === '/buy' || this.router.url === '/rent') {
            this.navExpand = true;
          } else {
            this.navExpand = false;
          }
        });
    }
  
    loginDialog(): void {
      this.dialog.open(LoginDialogComponent, {});
    }
  
    joinDialog(): void {
      this.dialog.open(JoinDialogComponent, {});
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>//COMPONENT CSS FILE
  
  .mat-toolbar-row,.mat-toolbar-single-row {
    height: 50px;;
   }
  
  .sidenav-container {
    height: 100%;
  }
  
  .sidenav {
    width: 200px;
    background: rgba(255, 255, 255, 0.8);
  }
  
  .mat-toolbar.mat-primary {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  
  .hidden {
    display: none;
  }
  
  @media screen and (min-width: 768px) {
    .sidenav {
      display: none;
    }
  }
  
  .spacer {
    flex: 1 1 auto;
  }
  
  mat-toolbar-row {
    max-width: 1280px;
  }
  
  mat-toolbar {
    align-items: center;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    max-height: 50px;
    min-height: 50px;
    transform: translateZ(1px);
    z-index: 9999;
    background: #fff
  }
  
  .nav-expand {
    max-width: 100%;
    padding: 0;
    background: #f5f5f5;
  }
  
  .nav-header {
    position: fixed;
  }
  
  mat-chip-list {
    margin: 0 1.2vw;
  }
  
  .logo-default {
    margin-top: 51px;
    cursor: pointer;
    height: 101px;
    width: 100px
  }
  
  .logo-default:focus {
      outline: none;
  }
  
  .logo-default:hover {
      filter: brightness(90%);
  }
  
  mat-chip:hover {
    cursor: pointer;
  }
  
  mat-chip-list {
    flex-wrap: nowrap;
  }
  
  .mat-button {
    margin: 0 5px;
  }
  
  mat-chip a {
    text-decoration: none;
  }
  
  .divider {
    font-weight: normal;
    margin: 0 10px;
  }
  
  mat-chip a,
  .divider,
  .mat-button,
  .nav-button {
    font-family: "Poppins", sans-serif;
    color: #444;
    font-size: 15px;
  }
  
  a.active {
    background: #ccc !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>//COMPONENT HTML FILE
  
  &lt;mat-sidenav-container class="sidenav-container"&gt;
   &lt;mat-sidenav
    #drawer
    [ngClass]="{ hidden: !(isHandset$ | async) }"
    class="sidenav"
    fixedInViewport="false"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)"
   &gt;
    &lt;mat-toolbar&gt;Navigation&lt;/mat-toolbar&gt;
    &lt;mat-nav-list&gt;
     &lt;a
      *ngFor="let navItem of navItems"
      routerLinkActive="active"
      mat-list-item
      routerLink="{{ navItem.path }}"
      &gt;{{ navItem.text }}&lt;/a
     &gt;
     &lt;div *ngIf="!isAuthorized; else loggedIn"&gt;
      &lt;a mat-list-item (click)="loginDialog()"&gt;Login&lt;/a&gt;
      &lt;a mat-list-item (click)="joinDialog()"&gt;Join&lt;/a&gt;
     &lt;/div&gt;
     &lt;ng-template #loggedIn&gt;
      &lt;a mat-list-item href="#"&gt;Geebrox&lt;/a&gt;
     &lt;/ng-template&gt;
    &lt;/mat-nav-list&gt;
   &lt;/mat-sidenav&gt;
   &lt;mat-sidenav-content&gt;
    &lt;mat-toolbar class="nav-header"&gt;
     &lt;mat-toolbar-row [ngClass]="{ 'nav-expand': navExpand }"&gt;
      &lt;img
       routerLink="/"
       class="logo-default"
       src="./assets/img/header/nav/nav-logo-default.jpg"
       alt="Honadon"
      /&gt;
      &lt;mat-chip-list *ngIf="!(isHandset$ | async)"&gt;
       &lt;a
        *ngFor="let navItem of navItems"
        routerLinkActive="active"
        mat-button
        routerLink="{{ navItem.path }}"
        &gt;{{ navItem.text }}&lt;/a
       &gt;
      &lt;/mat-chip-list&gt;
      &lt;span class="spacer"&gt;&lt;/span&gt;
      &lt;mat-chip-list *ngIf="!isAuthorized &amp;&amp; !(isHandset$ | async)"&gt;
       &lt;mat-chip class="nav-button" (click)="loginDialog()"&gt;Login&lt;/mat-chip&gt;
       &lt;span class="divider"&gt;or&lt;/span&gt;
       &lt;mat-chip class="nav-button" (click)="joinDialog()"&gt;Join&lt;/mat-chip&gt;
      &lt;/mat-chip-list&gt;
      &lt;mat-chip-list *ngIf="isAuthorized &amp;&amp; !(isHandset$ | async)"&gt;
       &lt;mat-chip&gt;&lt;a href="#"&gt;sample_user&lt;/a&gt;&lt;/mat-chip&gt;
      &lt;/mat-chip-list&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;/mat-toolbar-row&gt;
    &lt;/mat-toolbar&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
   &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works, but it has a bug on mobile landscape resolution (rotate the screen), the sidenav menu button appears and when I click this menu button I can see only backdrop of the sidenav. How can I fix this issue or must I write own navigation panel without angular material?</p>
  
  <p>Images:</p>
  
  <p>Side nav on mobile portrait resolution</p>
  
  <p><a href="https://i.stack.imgur.com/CNbHS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CNbHS.png" alt="enter image description here"></a></p>
  
  <p>Appears only backdrop (on mobile landscape resolution)</p>
  
  <p><a href="https://i.stack.imgur.com/G02UR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G02UR.png" alt="enter image description here"></a></p>