support for multiple sidenav on each side

[Debananda]

Bug, feature request, or proposal:

Feature Request : To have multiple sidenav on each side as we have in angular-material1

What is the expected behavior?

Multiple sidenavs on each side

What is the current behavior?

only one sidenav per side

[jelbourn]

This feature is already present.

[Debananda]

@jelbourn : I am still getting below exception while i have more than one sidenav on rightside

"EXCEPTION: Error in ./AppComponent class AppComponent - inline template:1:0 caused by: A sidenav was already declared for 'align="end"'

Code:

<md-sidenav-layout class="body-content">
    <md-sidenav #appNavigation [opened]="false" mode="over" class="left-side-nav">
        <app-hamburger-menu></app-hamburger-menu>
    </md-sidenav>
    <md-sidenav #userApps align="end" [opened]="false" mode="over" class="right-side-nav">

    </md-sidenav>
    <!-- Angular2-Material doesnot aupport more than 1 sidenav on each side
                    (https://www.npmjs.com/package/@angular2-material/sidenav)-->
    <md-sidenav #userStories align="end" [opened]="false" mode="over" class="right-side-nav">
        <h3>This is Stories Test</h3>
    </md-sidenav>
    <md-sidenav #userNotifications align="end" [opened]="false" mode="over" class="right-side-nav">
        <h3>This is Notification Test</h3>
    </md-sidenav>
    <md-sidenav #userProfile align="end" [opened]="false" mode="over" class="right-side-nav">
        <h3>This is Profile Test</h3>
    </md-sidenav>
</md-sidenav-layout>

[jelbourn]

Oh, I misread and didn't see the "per side". I don't think this is a feature we would want to add, as it doesn't really mesh with the material design spec.

[Debananda]

ok

[xtianus79]

@jelbourn this is a feature I would most definitely want to use. Is this possible as it is in Angular 1?

Also, I will make this pitch as to way someone would want to use it. The sidenav isn't a sidenav... It is a side modal panel. Which is much more convenient to work with information and perhaps interact with it. Think form entry, quick info interaction, etc. The dialog box shouldn't be the sole mechanism for this... In fact, sidenav should have the same or more power than mddialog. It just makes more sense.

[POFerro]

Was looking for this feature. I'm pretty sad it is not supported in material 2. Currently I'm migrating an application from material 1 and got stuck in this because it uses two left side navs.
Is this request going to be reopened?

[rudzikdawid]

https://material.angular.io/components/component/sidenav
inside docs:

...
A sidenav container may contain one or two <md-sidenav> elements.
When there are two <md-sidenav> elements,
each must be placed on a different side of the container.
See the section on positioning below.
...

but it doesn't work
Google Music, material design app by the way... has two sidenav.
And it is very elegant solution

last build: "@angular/material": "angular/material2-builds"

ERROR Error: Uncaught (in promise): Error: A sidenav was already declared for 'align="start"'

[willshowell]

@rudzikdawid They can't both be "start". Did you align them "start" and "end"?

[lucaslopez]

You can actually achieve something similar by including a sidebar-container+sidebar inside another sidebar:
`

      <md-sidenav mode="side" #menuLeft (open)="closeStartButton.focus()">
        <md-sidenav-container fxFlex="1 1 100%;">
          <md-sidenav mode="side" #menuLeft2 (open)="closeStartButton.focus()">
            Second
            <br>
            <button md-button #closeStartButton (click)="menuLeft2.close()">Close</button>
          </md-sidenav>
          <div style="width: 400px;">Start Sidenav.</div>
          <br>
          <button md-button #closeStartButton (click)="menuLeft.close()">Close</button>
        </md-sidenav-container>
      </md-sidenav>



      <md-sidenav mode="push" #menuRight align="end">
        End Sidenav.
        <button md-button (click)="menuRight.close()">Close</button>
      </md-sidenav>

      My regular content. This will be moved into the proper DOM at runtime.
      <button md-button (click)="menuLeft.open()">Open start sidenav</button>
      <button md-button (click)="menuLeft2.open()">Open start sidenav 2</button>
      <button md-button (click)="menuRight.open()">Open end sidenav</button>

    </md-sidenav-container>

`

[waterlooblue]

Instead of having multiple side panels, you can make the content within the side panel dynamic to achieve the same result.

[Mkhassani]

You can have two side bars one right and other left

 <mat-sidenav-container>

    <mat-sidenav #right position="start">
       Start Sidenav.
    </mat-sidenav>

    <mat-sidenav #left position="end">
       End Sidenav.
    </mat-sidenav>

<div>
    <button mat-button (click)="right.open()">right</button>
    <button mat-button (click)="left.open()">left</button>
</div>

</mat-sidenav-container>

[evanjmg]

This is still an issue and should not be closed. Components should be flexible and dynamic especially when it comes to positioning. I've tried all the solutions above none work. Simple workaround is write your own component and use angular animations

[oussamaABID]

inside sidenav you can use switch to show component

onToggle() {
    if ( this.openedNav) {
      this.myNav.close().then(() => {
        this.myNavType = 'small';
        this.myNav.open();
      });
    } else {
      this.myNav.open().then(() => {
      this.myNavType = 'big';
      });
    }