CODEWITHSUNDEEP
javascriptangulartypescriptangular-material
Limitless
Limitless

Reputation: 23

How to add two sidenav in page with Angular?

I am creating a page with Angular, using Angular-Material where I must place two sidenav, one on the left where some user data is shown and another on the right with a menu of options, an image of what I have so far:

Example

The part of the white box is where the user data would go and to the right is where I want the options menu to be seen, which is the red box, although I already add the two sidenav the problem is that I cannot see the one on the right and that when pressing the button it expands to the left as in this example:

https://stackblitz.com/edit/angular-bqgztk?file=src%2Fapp%2Fminivariant.component.html

Although in this example the options menu handles it from the left, here is the code I'm working on:

home.component.html

<mat-sidenav-container fullscreen>
<mat-sidenav mode="side" #sidenav opened position="start">
    <mat-toolbar color="primary" class="mat-elevation-z4">

    </mat-toolbar>

</mat-sidenav>
<mat-sidenav-content style="z-index: unset;overflow: hidden;">
    <mat-toolbar>
        <button mat-icon-button (click)="sidenav.toggle()">
            <mat-icon>menu</mat-icon>
        </button>
        <span class="toolbar-spacer"></span>
        <label class="label">2719872</label>
        <mat-icon class="menu" (click)="isExpanded = !isExpanded">menu</mat-icon>
    </mat-toolbar>
    <mat-sidenav-container class="example-sidenav-container" autosize>
        <mat-sidenav #sidenav2 position="end" class="example-sidenav" mode="side" opened="true">
            <mat-nav-list class="dashboard">
                <a mat-list-item (click)="toggleActive($event)">
                    <mat-icon mat-list-icon>description</mat-icon>
                    <p matLine *ngIf="isExpanded">Documentación</p>
                </a>
                <a mat-list-item (click)="toggleActive($event)">
                    <mat-icon mat-list-icon>video_label</mat-icon>
                    <p matLine *ngIf="isExpanded">Tutoriales</p>
                </a>
                <a mat-list-item (click)="toggleActive($event)">
                    <mat-icon mat-list-icon>contact_support</mat-icon>
                    <p matLine *ngIf="isExpanded">Contáctenos</p>
                </a>
                <a mat-list-item (click)="toggleActive($event)">
                    <mat-icon mat-list-icon>logout</mat-icon>
                    <p matLine *ngIf="isExpanded">Salir</p>
                </a>
            </mat-nav-list>
        </mat-sidenav>
    </mat-sidenav-container>
    <div class="main-content">
        <p>
            Hi
        </p>
    </div>
    <router-outlet></router-outlet>
</mat-sidenav-content>

Upvotes: 1

Views: 1190

Answers (1)

uiTeam324
uiTeam324

Reputation: 1245

The structure in not right. You should have one container and then use position attribute to align them.

<mat-sidenav-container class="example-container">
  <mat-sidenav opened mode="side" opened="true">Start content</mat-sidenav>
  <mat-sidenav opened mode="side" position="end" opened="true">End content</mat-sidenav>
   Main content
</mat-sidenav-container>

Demo

Upvotes: 2

Related Questions