0

Fiz um menu utilizando o SideNav do Angular Material Design desta forma:

<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>

Ficando assim:

inserir a descrição da imagem aqui

Eu queria fazer um menu, utilizando o NavBar com Sub-Itens e separação. Já andei pesquisando e encontrei nada. Tem como fazer ou dão outra sugestão?

Obrigado.

1 Resposta 1

2

Olá, tudo bem?

Uma forma de criar uma Navigation de modo bem estruturado e de fácil manutenção com Material Angular é através da Navigation Schematic, que compoem o pacote de Schematics do Angular CLI.

A própria documentação é clara na abordagem e construção: https://material.angular.io/guide/schematics#navigation-schematic

De toda forma você pode para solucionar seu problema no momento indico a seguinte abordagem:

<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>

Assim você pode inserir items no seu menu que possuem subitens, também deixei ativo o hamburger menu como opção para ocultar o menu lateral. Espero ter ajudo.

Meu link de exemplo:
Veja o preview no arquivo table-selection-example.html
https://stackblitz.com/edit/angular-vmdpza

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .