Currently, I am in the process of creating a homepage with a toggleable sidenav. I have successfully implemented the functionality, but I am facing an issue. When the sidenav is closed, I still want to display the icons on the left-hand side instead of icons with text (when opened). My setup involves three components: app, header, and side-nav.
The toggle button is located in the header component, and I have set up an event binding to make the text in the sideNav disappear when toggled. However, the problem is that the page does not adjust accordingly, leading to the sidenav remaining the same size but with less text.
I am unsure whether this issue stems from TypeScript or something related to CSS.
header.html
<button mat-icon-button (click)="toggleSideNav()"><mat-icon>menu</mat-icon></button>
header.ts
@Output() onToggleSideNav: EventEmitter<any> = new EventEmitter();
toggleSideNav() {
this.onToggleSideNav.emit();
}
app.html
<mat-drawer-container>
<mat-drawer mode="side" [opened]=true>
<app-side-nav [isExpanded]='sideNavOpen'></app-side-nav>
</mat-drawer>
<mat-drawer-content>
<app-header (onToggleSideNav)='sideNavToggler()'></app-header>
<router-outlet></router-outlet>
</mat-drawer-content>
</mat-drawer-container>
app.ts
sideNavOpen: boolean = true;
sideNavToggler() {
this.sideNavOpen = !this.sideNavOpen;
}
sidenav.html
<mat-nav-list>
<a mat-list-item routerLink="/home" routerLinkActive="list-item-active">
<mat-icon>home</mat-icon>
<h4 mat-line *ngIf="isExpanded">Home</h4>
</a>
</mat-nav-list>
sidenav.ts
@Input() isExpanded: boolean = true;