CODEWITHSUNDEEP
angularangular-material
Silentbob
Silentbob

Reputation: 3065

Angular Material sidenav always open on desktop

I am new to Angular and I am trying to apply the sidenar component from Angular Material (current version).

I have the following code within the main-nav component:

<mat-sidenav-container class="sidenav-container" autosize>
    <mat-sidenav #drawer class="sidenav" fixedInViewport
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="(isHandset$ | async) === false">
  <mat-toolbar ><div class="menuTitle">Menu</div></mat-toolbar>
  <mat-nav-list>
    <a mat-list-item href="#">Dashboard</a>
    <a mat-list-item href="#">Screen2</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 class="title">Information System</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

When I run the app the menu or the hamburger icon doesnt appear. If I shrink my browser down to mobile size the hamburger icon appears and I can access the side nav and toggle it on and off. If I then expand the browser the menu stays in place and I cannot toggle it.

How do I get the menu/hamburger icon to appear when I launch the app on a desktop screen?

As an extra can I get the side nav to appear below the toolbar?

Upvotes: 1

Views: 4318

Answers (3)

Furki4_4
Furki4_4

Reputation: 9

I tried the other suggestions above, worked better but these were not what I expected. So, I removed

[mode]="(isHandset$ | async) ? 'over' : 'side'"

and

*ngIf="isHandset$ | async

Last but not least, I changed the false value to true in this code of line:

[opened]="(isHandset$ | async) === false"

What these changes make possible for us:

  • When page loaded, nav-list is closed.
  • Also, you can click outside of the nav-list element to close it.

The other suggestions above didn't worked for me to achive these behavior.

Upvotes: 1

DannyP
DannyP

Reputation: 1

Remove

[mode]="(isHandset$ | async) ? 'over' : 'side'"

and

*ngIf="isHandset$ | async

Upvotes: 0

G. Tranter
G. Tranter

Reputation: 17958

All of this behavior is what you have coded. You've made the button conditional so that it will only show for handset media types. You've also set the drawer to be fixed open in 'side' mode if not a handset. And you placed the toolbar inside the sidenav not above it. Stop doing those things to get the behavior you want:

<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>
  <span class="title">Site Information System</span>
</mat-toolbar>

<mat-sidenav-container class="sidenav-container" autosize>
  <mat-sidenav #drawer class="sidenav" fixedInViewport
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'">
    <mat-toolbar ><div class="menuTitle">Menu</div></mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Dashboard</a>
      <a mat-list-item href="#">Wilton 10 QI</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

Upvotes: 2

Related Questions