поле на панели инструментов mat при размещении на верхней части mat-sideNav в Angular

Question

Я новичок в Angular Framework и пытаюсь научиться этому.Я попытался поместить панель инструментов mat поверх sidenav и попробовал подход ниже, но панель инструментов всегда имеет некоторый запас сверху.При нажатии на кнопку меню я изменяю поле для основного содержимого div. Ниже приведены мои CSS-файлы и HTML-файлы: все работает нормально, но проблема заключается только в поле на панели инструментов mat.Пожалуйста, помогите.

.example-sidenav-content {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: aqua;
}

.example-sidenav {
  padding: 2px;
  /*margin-top: 60px;*/

}

.sideDiv{
  height: 100vh;
  margin: 0;
}

.toolDiv{
  height: 60px;
  background: blueviolet;
  margin: 0;
}

mat-toolbar{
  margin: 0;
}

Ниже мой HTML-файл:

    <div class="toolDiv">
      <mat-toolbar color="primary">
        <button mat-icon-button (click)="toggle()">
          <mat-icon>menu</mat-icon>
        </button>
        <h3>Hello Toolbar</h3>
      </mat-toolbar>
    </div>
    <mat-sidenav-container class="sideDiv">
      <mat-sidenav #sidenav class="example-sidenav" mode="side" opened="true" [ngStyle]="{ 'width.em': sidenavWidth }">
        <!--<mat-toolbar class="menuBar">Menus</mat-toolbar>-->
        <mat-nav-list>
          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>library_books</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component0</h5>
            </div>
          </a>

          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>library_books</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component1</h5>
            </div>
          </a>

          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>question_answer</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component2</h5>
            </div>
          </a>
          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>person_add</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component3</h5>
            </div>
          </a>

          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>account_circle</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component4</h5>
            </div>
          </a>

          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>library_books</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component5</h5>
            </div>
          </a>

          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>library_books</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component6</h5>
            </div>
          </a>

          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>library_books</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component7</h5>
            </div>
          </a>

          <a mat-list-item routerLink="/" routerLinkActive="active">
            <mat-icon>library_books</mat-icon>
            <div fxFlex="10"></div>
            <div *ngIf="sidenavWidth > 6" class="sidenav-item">
              <h5 class="component-text">Component8</h5>
            </div>
          </a>
        </mat-nav-list>

      </mat-sidenav>

      <mat-sidenav-content [ngStyle]="{ 'margin-left.em': sidenavContentMargin }">

        <div class="example-sidenav-content">
          <router-outlet></router-outlet>
        </div>
      </mat-sidenav-content>

    </mat-sidenav-container>