How to prevent my angular sidenav from hiding the toolbar?

Issue

I would like to design an angular component made of a toolbar and below a sidenav. Here is the corresponding HTML code for my component:

<mat-toolbar color="primary">
    <button mat-icon-button (click)="sidenav.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
    Toolbar Title
</mat-toolbar>

<mat-sidenav-container>
    <mat-sidenav class="mat-elevation-z8" mode="side" opened="true" [fixedInViewport]="true">
        <mat-nav-list>
            <mat-list-item>
                <button mat-button class="menu-button">
                    <mat-icon svgIcon="server"></mat-icon>
                    <span> Servers</span>
                </button>        
            </mat-list-item>
            <mat-list-item>
                <button mat-button class="menu-button">
                    <mat-icon svgIcon="site"></mat-icon>
                    <span> Sites</span>
                </button>
            </mat-list-item>
            <mat-list-item>
                <button mat-button class="menu-button">
                    <mat-icon svgIcon="account"></mat-icon>
                    <span> Accounts</span>
                </button>
            </mat-list-item>
            <mat-list-item>
                <button mat-button class="menu-button">
                    <mat-icon svgIcon="admin"></mat-icon>
                    <span> Admin</span>
                </button>
            </mat-list-item>
        </mat-nav-list>  
    </mat-sidenav>
    <mat-sidenav-content>
    </mat-sidenav-content>
</mat-sidenav-container>

and here is the typescript code:

import { Component, OnInit, ViewChild } from '@angular/core';

import { MatSidenav } from '@angular/material/sidenav';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  @ViewChild(MatSidenav) sidenav: MatSidenav;

  constructor() {}

  ngOnInit(): void {}
}

when compiling that component the result I get is a toolbar hidden by the sidenav as shown in the figure below. Would you know what is wrong with my component ?

Solution

Just remove below attribute from your sidebar component and you problem should be resolved.

[fixedInViewport]="true"

Stackblitz Example:- https://stackblitz.com/edit/angular-x5n2bb?file=src%2Fapp%2Fsidenav-overview-example.html

Answered By - Vimal Patel