Using multiple sidenav's form one component i.e. md-sidenav #sidenav1, 2, 3, etc

[xtianus79]

Bug, feature request, or proposal:

feature request:
This was something you could do pretty easily in material 1.
It was shot down here from a previous post but the reasoning was a little shaky so I wanted to perhaps bring new life to the proposal.

The main reasoning is it already sort of exists if you per se call an align=start or align=end. Right there you have a way to have 2 on the page... but that isn't the best way to handle this.

Let's be honest a sidenav isn't really limited to the use of navigation. in fact, I don't know many people that do use it as navigation because it mostly just a stationary placement. don't hold me to that but in reality that is mostly what people use navigation for... not something that with a button that clicks and then poof here comes full on navigation.

Even your example illustrates this point.

the sidenav isn't a navigation... but rather a panel of information that may want to be used by the user at a specific point in time. I need to read this so click... I don't anymore so goodbye... without navigating somewhere else in a webpage. I.e. just like a modal. But a modal IMHO is used to give quick and message type information. Thanks for applying, or welcome message, or tour, or something short and sweet.

the sidenav/sidepanel / animated slider has much more utility and potential for usage... With this, you can perhaps fill out a form or display a video or read content that is tucked away from the user until the user calls upon it.

Not being able to do this multiple times on a page's component limits my possibility for doing this. I would like to get feedback but mostly I really wish this feature was put back into the side nav.

As of now is there any work around to this? Is this something you guys could implement?

What is the expected behavior?

Have multiple sidenavs on one components page

What is the current behavior?

the side panel can have 2 on a page but is limited to align start and align end

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
this is a plunker from your own instructions
https://plnkr.co/edit/6IKKULcBsLcp6JVhjmkZ?p=preview

What is the use-case or motivation for changing an existing behavior?

It is perhaps time to redefine and even rename the sidenav to something more symantic such as panel or slider or panel modal or sidepanel...

Which versions of Angular, Material, OS, browsers are affected?

n/a

Is there anything else we should know?

nope

[xtianus79]

Just as an update. I was able to do what I wanted through a process of ng-switch, ability to close the slider from the parent... and not using a routed endpoint to accomplish the said task. In our case updating form information.

There is the default form... Fill out form A and Fill out Form B.

Worked out pretty nicely. But perhaps harder than one would think. I will try to post a plunkr at some point to illustrate the functionality.

[StickNitro]

This is functionality that I would like to see in Material, I am creating a settings UI using the mat-drawer-container. In the mat-content I am using a mat-nav-list to generate a uniform list of setting headers (or sections), each section will open a full-width mat-drawer which will display the relevant UI for the selected settings section.

I have options but seems like this is something that would benefit others as well. I can at the moment have multiple mat-drawer with position="end" and each of the drawers can be opened but because the Error is thrown certain things like mode do not work as expected

[xtianus79]

@StickNitro I was able to do this with code... I will try to make a sample and post it

[theiviaxx]

@xtianus79 any luck with the sample?

[xtianus79]

@theiviaxx let me get that for you

[xtianus79]

@theiviaxx I have included the code below... There was some complexity about how the slide nav works in general.. everything still works great up through angular 7... this was a couple years ago I did this. But the heart of what I did was to create a switch case statement in the template... see the code and let me know if that helps get you along.

*** this code is in absolutely no order. there is a helper. a template and code in the ts file

import { Injectable } from '@angular/core';

@Injectable()

*** this is the main template that controls the different slide panels. 
<mat-sidenav-container>
    <mat-sidenav #sidenav mode="over" (close)="slideNavOpenened()" position="end">
        <div class="sidenav-content panel-content" style="min-width: 575px">
            <h4 [hidden]="personId">Create a New VSC</h4>
            <hr [hidden]="personId">
            <div [ngSwitch]="slidePanelSelection">
                <access-form *ngSwitchDefault></access-form>
                <access-form *ngSwitchCase="1" [personId]="personId"></access-form>
                <allocation-form *ngSwitchCase="2" [personId]="personId"></allocation-form>
                <access-form *ngSwitchCase="3"></access-form>
            </div>
        </div>
    </mat-sidenav>
    <div class="sidenav-content">


*** this section here is the slide-nav panel it goes to when selected on the main template page above

<form name="allocation-form" (ngSubmit)="save();persons.closeSlider()">
    <div>
        <h4>VSC Info: {{person.firstName}} {{person.lastName}}</h4>
        <hr>
        <div><label>UserId: {{person.id}}</label></div>
        <div>{{person.userName}} - edit schedule </div>
    </div>
    <div class="ui grid">
        <div class="eight wide column">
        <table class="ui selectable celled table">
            <thead>
                <tr>
                    <th colspan="3">Guest Type</th>
                </tr>
            </thead>
                <tr *ngFor="let guestType of guestTypes">
                    <td><mat-checkbox [ngModel]="guestType.activeFlag" name="activeCheckbox#{{guestType.code}}" type="checkbox" (change)="checkboxGuestType(guestType)"></mat-checkbox></td>
                    <td>{{guestType.code}}</td>
                    <td>{{guestType.description}}</td>
                </tr>
        </table>
        </div>
        <div class="eight wide column">
            <table class="ui selectable celled table">
                <thead>
                    <tr>
                    <th colspan="3">Languages</th>
                    </tr>
                </thead>
                <tr *ngFor="let language of languages">
                    <td><mat-checkbox #{{language.code}} [ngModel]="language.activeFlag" name="activeCheckbox#{{language.code}}" type="checkbox" (change)="checkboxLanguage(language)"></mat-checkbox></td>
                    <td>{{language.code}}</td>
                    <td>{{language.description}}</td>
                </tr>
            </table>
        </div>
    </div>
    <button mat-raised-button color="primary" type="submit" [accessInput]="['UP']" name="action" class="button-right-margin">Save</button>
    <button mat-raised-button color="primary" type="button" (click)="persons.closeSlider()" name="close">Cancel</button>
</form>

slideNavOpenened() {
        this.slidePanelSelection = null;
        this.personId = undefined;
    }



isOpened() {
    if (this.select.opened) {
        this.select._animationStarted.subscribe(() => {
            if (this.select.opened) {
                SlliderToggleHelper.jumpToClose()
            } else {
                SlliderToggleHelper.jumpToOpen()
            }
        })
    }
}


export class SlliderToggleHelper {

    static jumpToClose() {
        let jumpToId = document.getElementById('jump-to');
        jumpToId.classList.add('jump-to-toggle');
        let breadCrumbAdjust = document.querySelector('.mat-drawer-content');
        breadCrumbAdjust.classList.add('add-padding');
        let leadDisplayHidden = document.querySelector('top-lead-display');
        leadDisplayHidden.classList.add('hidden');
        /*let removeInvisiblePanel = <HTMLElement>document.getElementsByClassName('app---comp1')[0];
        removeInvisiblePanel.style.zIndex = '0';*/
    }

    static jumpToOpen() {
        let jumpToId = document.getElementById('jump-to');
        jumpToId.classList.remove('jump-to-toggle');
        let breadCrumbAdjust = document.querySelector('.mat-drawer-content');
        breadCrumbAdjust.classList.remove('add-padding');
        let leadDisplayHidden = document.querySelector('top-lead-display');
        leadDisplayHidden.classList.remove('hidden');
       /* let removeInvisiblePanel = document.getElementsByClassName('app---comp1')[0];
        removeInvisiblePanel.removeAttribute('style');*/
    }

}


    slidePanelSelection: number;

    passId(selectedPerson: any, formName: string) {
        if (formName === 'detail') {
            this.slidePanelSelection = 1;
            this.personId = selectedPerson;
        } else if (formName === 'allocation') {
            this.slidePanelSelection = 2;
            this.personId = selectedPerson;
        }
    }

    slideNavOpenened() {
        this.slidePanelSelection = null;
        this.personId = undefined;
    }

    saveNewUser() {
        this.personService.getPersons().subscribe((persons) => {
            if (persons) {
                this.persons = persons;
                this.personsCopy = persons;
            }
        });
        this.slidePanelSelection = 3;
    }

[xtianus79]

if this doesn't work for you I will do a proper sample in git with a code editor.

[jelbourn]

(revisiting old feature requests)

I agree that the way we approached mat-sidenav has some issues- it is too prescriptive in some cases and too flexible in others. At this stage, though, it would be really difficult to change the design of the component since it would be quite breaking. I could see us revisiting/redoing sidenav in the future, splitting it up into more purpose-specific components, but it's not something we'd be tackling in the next year at the least.