Currently, I am tackling a project that involves Angular, but my understanding of certain aspects is still in its infancy. One particular challenge I'm facing is related to the positioning within my application. The setup includes a header (toolbar), a sidenav, and a main content area. A toggle button on the header effectively opens and closes the sidebar thanks to a service.
The issue lies with the main content area, which needs to always sit to the right of the sidenav. It should remain positioned correctly whether the sidenav is open or closed. After some research, it seems using <mat-sidenav-content> is crucial for maintaining this layout.
Within my app.component.html, I have incorporated a router outlet to display varied content in the main area. Here's a glimpse of how it currently looks:
AppComponent
<app-header></app-header>
<mat-sidenav-container class="main-sidenav">
<app-sidenav></app-sidenav>
<router-outlet></router-outlet>
</mat-sidenav-container>
App-Sidenav
<mat-sidenav [disableClose]="true" autosize class="sidenav" mode="side" opened #sidenav>
...
</mat-sidenav>
This structure functions well with the header.
Header
<mat-toolbar class="header">
<a routerLink="/workouts" href="#" class="logo--link">Logo Goes Here</a>
<button (click)="toggleSidenav()">toggle sidenav</button>
</mat-toolbar>
I am specifically focusing on getting the workouts.component to function properly so I can replicate the process for other components:
WorkoutsComponent
<mat-sidenav-content>
<h1>Workout list will go here</h1>
</mat-sidenav-content>
How can I ensure that this content remains to the right of the sidebar regardless of its state?
I've experimented with different approaches, like wrapping elements in the appcomponent with <mat-sidenav>... and <mat-sidenav-content>.... Unfortunately, these attempts resulted in breaking my entire application.
I've created a StackBlitz showcasing my current progress.
While I have set up routing and prepared a few components, resolving even one would likely pave the way for implementing the rest effortlessly.
If there are any questions you have that could aid in solving this issue, feel free to ask. Thank you for your help.