How to Make Ascents with the Sidenav Component of Angular Material Design

Question

I made a menu using the Sidenav of Angular Material Design in this way:

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
        <mat-toolbar>Menu</mat-toolbar>
        <mat-nav-list>
            <a mat-list-item href="#">Clubes</a>
            <a mat-list-item href="#">Gestores de Clubes</a>
            <a mat-list-item href="#">Agentes</a>
            <a mat-list-item href="#">Jogadores</a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary">
            <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
            <span>Painel Administrativo</span>
        </mat-toolbar>
        <ng-content></ng-content>
    </mat-sidenav-content>
</mat-sidenav-container>

Thus remaining:

I wanted to make a menu, using Navbar with Sub-Items and separation. I’ve been searching and found nothing. Is it possible to do or give another suggestion?

Thank you.

Answer 1

Hello, all right?

One way to create a well structured and easy to maintain Navigation with Angular Material is through the Navigation Schematic, which make up the Schematics package of the Angular CLI.

The documentation itself is clear in the approach and construction: https://material.angular.io/guide/schematics#navigation-Schematic

Anyway you can to solve your problem at the moment I indicate the following approach:

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
        <mat-toolbar>Menu</mat-toolbar>
        <mat-nav-list>
            <a mat-list-item href="#">Clubes</a>
            <a mat-list-item href="#">Gestores de Clubes
              <li>dasdsadas</li>
            </a>

            <a mat-list-item href="#">Agentes</a>
            <a mat-list-item href="#">Jogadores</a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary">
            <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)=                    "drawer.toggle()">
              <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
            </button>
            <button mat-button [matMenuTriggerFor]="menu">Menu</button>
            <mat-menu #menu="matMenu">
              <button mat-menu-item>Item 1</button>
              <button mat-menu-item>Item 2</button>
            </mat-menu>
        </mat-toolbar>
        <ng-content></ng-content>
    </mat-sidenav-content>
</mat-sidenav-container>

So you can insert items in your menu that have subitens, also left active the hamburger menu as option to hide the side menu. I hope I have help.

My example link:
See the preview in the table-Selection-example.html file
https://stackblitz.com/edit/angular-vmdpza