title: The sidenav overlaps the content of the page in angular
body: <p>The sidenav overlaps the page content of the page instead of moving the page content to right:</p>
  
  <p><strong>side navigation component: app-mat-menu</strong></p>
  
  <pre><code>&lt;mat-sidenav id="sidenav" #mainsidenav mode="side" opened&gt;
  
          &lt;div routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item"&gt;
              &lt;a class="nav-link" [routerLink]="[menuItem.path]"&gt;
                  &lt;i class="material-icons"&gt;{{menuItem.icon}}&lt;/i&gt;
                  &lt;a&gt;{{menuItem.title}}&lt;/a&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div *ngFor="let serviceItem of serviceItems" class="nav-item"&gt;
              &lt;a class="nav-link" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                  &lt;i class="material-icons"&gt;{{serviceItem.icon}}&lt;/i&gt;
                  &lt;a&gt;{{serviceItem.title}}&lt;/a&gt;
              &lt;/a&gt;   
              &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"&gt;
                  &lt;!--&lt;li routerLinkActive="active" *ngFor="let item of serviceItem.submenu" class="nav nav-item dropdown-menu dropdown-item" aria-labelledby="navbarDropdownMenuLink"&gt;--&gt;
                         &lt;a *ngFor="let item of serviceItem.submenu" class="dropdown-item nav-link" [routerLink]="[item.path]"&gt;
                             &lt;p&gt;{{item.title}}&lt;/p&gt;
                         &lt;/a&gt;
                  &lt;!--&lt;/li&gt;--&gt;
              &lt;/div&gt;     
  
  
          &lt;/div&gt;
  
  
  &lt;/mat-sidenav&gt;
  &lt;mat-toolbar id="toolbar"&gt;
          &lt;mat-toolbar-row id=toolbar1 fxLayout="row" fxLayoutAlign="center"&gt;
              &lt;a&gt; Welcome to Shared Services&lt;/a&gt;
              &lt;span class="fill-space"&gt;&lt;/span&gt;
  
              &lt;a  id="user" class="dropdown"&gt;
                &lt;div dropdownToggle class="dropdown-toggle nav-link" data-toggle="dropdown"&gt;
                      &lt;mat-icon&gt;person&lt;/mat-icon&gt;
                &lt;/div&gt;
                &lt;div dropdownMenu class="dropdown-menu"&gt;
                    &lt;li&gt;&lt;span  id="greeting"&gt;Hi! Manoj&lt;/span&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a&gt;Another Action&lt;/a&gt;&lt;/li&gt;
                    &lt;li [routerLink]="['/login']" name="logout" value="Log Out"&gt;&lt;a id="logout"&gt;Log Out&lt;/a&gt;&lt;/li&gt;
                &lt;/div&gt;
              &lt;/a&gt;
  
          &lt;/mat-toolbar-row&gt;
          &lt;mat-toolbar-row id=toolbar2 fxLayout="row" fxLayoutAlign="center"&gt;    
              &lt;span&gt;&lt;a&gt;&lt;mat-icon (click)="mainsidenav.toggle()"&gt; menu &lt;/mat-icon&gt;&lt;/a&gt;&lt;/span&gt;
              &lt;span class="fill-space"&gt;&lt;/span&gt;
              &lt;span&gt;&lt;a class="nav-link" routerLink="/services"&gt; Service Catalog &lt;/a&gt;&lt;/span&gt;
              &lt;span&gt;&lt;a class="nav-link" routerLink="/dashboard"&gt; Account &lt;/a&gt;&lt;/span&gt;
              &lt;span&gt;&lt;a class="nav-link" routerLink="/dashboard"&gt; Support &lt;/a&gt;&lt;/span&gt;
          &lt;/mat-toolbar-row&gt;
  
  &lt;/mat-toolbar&gt;
  </code></pre>
  
  <p><strong>Below is the main app.component.html:</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  &lt;mat-sidenav-container&gt;
  
          &lt;div&gt;
              &lt;app-mat-menu&gt;&lt;/app-mat-menu&gt;            
              &lt;router-outlet&gt;&lt;/router-outlet&gt;
              &lt;app-footer&gt;&lt;/app-footer&gt;
          &lt;/div&gt;
  &lt;/mat-sidenav-container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I haven't given any custom css property related to height and width for the page.</p>