Currently, I am working on integrating the mat-sidenav into a project. Most of the functionality is working well, but there is one particular issue that arises. When running the app locally in a browser and resizing the window tab multiple times, it opens in a new browser window. However, the current page's layout remains intact with the sidenav properly positioned to the side as expected.
On navigating to another page, the content appears underneath the side-nav. I attempted setting autosize=true, which helped in restoring the layout when navigating back to the original page. I also experimented with setting a timeout and manually opening and closing the side-nav, but it didn't resolve the issue. I wonder if there is a way to force refresh the other pages. Noteworthy, the side-nav code is encapsulated in its own separate component.
<mat-sidenav-container [class]="mobRes?'project1-sidenav mob-sidenav':'project1-sidenav desk-sidenav'" autosize="true">
<mat-sidenav #sidenav [mode]="!mobRes?'side':'over'" fixedInViewport="false" [opened]="!mobRes" [disableClose]="!mobRes">
...
</mat-sidenav>
</mat-sidenav-container>
Upon further investigation, I discovered that as the resize event is triggered multiple times, the navbar starts to overlap the content. An interesting observation is that when this issue occurs, the console.logs are displayed on separate lines, unlike when it is working correctly. This behavior seems to occur when navigating away from the current page. To reproduce the issue, start the app, resize the window tab, navigate to another page, and resize the window again. Subsequently, the content will be covered, but navigating back will reset the layout to its intended positions.