Angular Material Side Bar with "Half" Side Mode

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

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.

Open mat-sidenav from end position with Mini icon variant

Try this, just added a few things to better handle the icon container since it was getting pushed to the right side.

These are the two changes I made

.icon-container {
  margin: 0 5px;
}

<mat-list-item>
    <p  matLine *ngIf="isExpanded">בדיקה</p>
    <div class="icon-container">
      <mat-icon mat-list-icon>home</mat-icon>
    </div>
</mat-list-item>

https://stackblitz.com/edit/angular-b4gmby-ydh9sf

Angular Material Side Navigation bar

If you are using angular-material there is ng generate @angular/material:material-nav feature.

generate navbar component

 ng generate @angular/material:material-nav --name <component-name>

example:

 ng generate @angular/material:material-nav --name navbar 

here is blog where you can read about it.

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

---

Related Topics