Recently, I ventured into using Angular Flex for the first time and I find myself a bit unsure about the nesting of layout containers. The issue arises when dealing with a navigation tag that triggers an angular-material sidenav opening to the left, pushing the rest of the content to the right. Lately, I have noticed a lag in the sidenav animation during opening and closing – it freezes halfway through the animation for a brief moment before completing the action. I suspect that my nesting of column and row fxLayout containers within a single row fxLayout container might be the cause of this performance issue. Am I potentially complicating matters by nesting these containers, resulting in performance problems?
Here is an excerpt of my code:
<div fxLayout fxAlign="start start">
<mat-toolbar color="primary">
<button mat-icon-button (click)="toggleSidenav()">
<mat-icon aria-label="menu">
<i class="material-icons">restaurant_menu</i>
</mat-icon>
</button>
<span>POC Toolbar</span>
<span class="fill-remaining-space"></span>
<div class="rhs">
[...] // The code continues, abbreviated for the sake of readability
</div>
</mat-toolbar>
</div>
[...] // The code continues, abbreviated for the sake of readability
my navigation component html:
<mat-sidenav-container position="start" class="custom-sidenav-container">
[...] // The code continues, abbreviated for the sake of readability