'How to prevent my angular sidenav from hiding the toolbar?
I would like to design an angular component made of a toolbar and below a sidenav. Here is the corresponding HTML code for my component:
<mat-toolbar color="primary">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
Toolbar Title
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav class="mat-elevation-z8" mode="side" opened="true" [fixedInViewport]="true">
<mat-nav-list>
<mat-list-item>
<button mat-button class="menu-button">
<mat-icon svgIcon="server"></mat-icon>
<span> Servers</span>
</button>
</mat-list-item>
<mat-list-item>
<button mat-button class="menu-button">
<mat-icon svgIcon="site"></mat-icon>
<span> Sites</span>
</button>
</mat-list-item>
<mat-list-item>
<button mat-button class="menu-button">
<mat-icon svgIcon="account"></mat-icon>
<span> Accounts</span>
</button>
</mat-list-item>
<mat-list-item>
<button mat-button class="menu-button">
<mat-icon svgIcon="admin"></mat-icon>
<span> Admin</span>
</button>
</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
</mat-sidenav-content>
</mat-sidenav-container>
and here is the typescript code:
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
@ViewChild(MatSidenav) sidenav: MatSidenav;
constructor() {}
ngOnInit(): void {}
}
when compiling that component the result I get is a toolbar hidden by the sidenav as shown in the figure below. Would you know what is wrong with my component ?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

