Components: 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';
      });
    }

[StickNitro]

I cam across this issue today in an app I am working on, I am creating a settings UI which has a nav list in the drawer content and each button in the nav list opens its own corresponding drawer. I have three drawers and they all work with position="end" with the only drawback being the error that I get in the console

@waterlooblue mentioned making the content of the sidebar dynamic which is interesting, does this mean loading the component using the ComponentFactoryResolver?

[hsw107]

We have a use case where we have a left nav menu that opens up a panel when certain menu items are clicked. We did this using nested containers, where every container just has one side-nav (demo link: https://stackblitz.com/edit/angular-hpgcjr?file=app%2Fsidenav-overview-example.html)

The content in our panel also needs to be dynamic, so we just swap out what we render in there when certain items are clicked giving the illusion of there being even more panels.

[waterlooblue]

@StickNitro what I meant was the content inside the sidenav changes depending on what triggers it to open. So I only have one mat-sidenav but the component that shows inside changes.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}