angularangular-materialangular7mat-sidenav

Fixed hamburger icon angular


I generated a header component using ng generate @angular/material:material-nav --name header, in this I need to have the hamburger icon fixed even if the screen size is larger. Right now it appears only when screen size is small. I need some help in fixing this. Code in stackblitz (https://angular-bfjx3s.stackblitz.io/) Thank you

Need something like this (https://console.cloud.google.com)


Solution

  • You need to change *ngIf condition for the hamburger button like this (or you could even remove *ngIf if you want the button to be always visible:

    <mat-toolbar color="primary">
          <button
            type="button"
            aria-label="Toggle sidenav"
            mat-icon-button
            (click)="drawer.toggle()"
            *ngIf="true">
            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
          </button>
          <span>web-doctor</span>
      </mat-toolbar>
    

    The code here: https://stackblitz.com/edit/angular-kutmnh