How to use multiple angular material sideNav bars in same side?

Issue

I have 5 buttons for sideNav bars in left side. What I wanted to do is when I click one button sidebar is coming but when I click another button another side bar should come and previous one should automatically close

Here is my code :

HTML

<mat-drawer-container class="example-container" autosize>
  <div class="container">
    <div class="actions">
      <div (click)="drawer1.toggle()"></div>
      <div (click)="drawer2.toggle()"></div>
      <div (click)="drawer3.toggle()"></div>
      <div (click)="drawer4.toggle()"></div>
      <div (click)="drawer5.toggle()"></div>
    </div>

    <div class="content">
      <mat-drawer #drawer1 class="example-sidenav" mode="over">
        <p>A</p>
      </mat-drawer>

      <mat-drawer #drawer2 class="example-sidenav" mode="over">
        <p>B</p>
      </mat-drawer>

      <mat-drawer #drawer3 class="example-sidenav" mode="over">
        <p>C</p>
      </mat-drawer>

      <mat-drawer #drawer4 class="example-sidenav" mode="over">
        <p>D</p>
      </mat-drawer>

      <mat-drawer #drawer5 class="example-sidenav" mode="over">
        <p>E</p>
      </mat-drawer>
    </div>
  </div>
</mat-drawer-container>

Style.SCSS

.mat-drawer-backdrop.mat-drawer-shown {
  background-color: unset !important;
}

.mat-drawer { //locate the side bar under the button
  z-index: -1 !important;
  width: 90%;
}

.mat-drawer-inner-container { //make the container text 
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 140px;
}

Here is the

StackBlitz

Solution

At the end of the day, you will need to toggle a sidenav and manually close the others, just give each sidenav an id, and use that div with the click event to toggle the specified sidenav and close the others.

Here's an edited version of you stackblitz as a running example.

Answered By - Mohamed.Karkotly