CODEWITHSUNDEEP
cssangularangular-material
Jeremy
Jeremy

Reputation: 1288

Keeping content to the right of sidebar Angular Material

I'm working on a project, but am fairly new to aspects of Angular and I just can't seem to get this positioning figured out. Currently I have an app with a header (toolbar), a sidenav, and a main content area. There is a "toggle" button on the header that uses a service to toggle open and close the sidebar. This is working as expected so far.

However, the issue I am running into pertains to the main content area that is supposed to be to the right of the sidenav. So when the sidenav is open, it stays to the right, and when it is closed, it stays to the right. From what I have seen so far is that I need to be using the <mat-sidenav-content> to keep this content positioning.

Currently in my app.component.html I am using a router outlet so I can display different content in the main content area. Here is what that looks like:

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>

And this is working great with my 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>

The main content area I am trying to keep always to the right of the sidenav.. Currently I am trying to get the workouts.component to work properly so I can use the method for the other components:

WorkoutsComponent

<mat-sidenav-content>
  <h1>Workout list will go here</h1>
</mat-sidenav-content>

How can I get this content to stay over to the right of the sidebar whether it is opened or closed?

I have tried a few methods such as wrapping the elements in the appcomponent with <mat-sidenav>... and <mat-sidenav-content>... but doing so ends up breaking my app altogether.

Here is a stackblitz of my app so far.

There is some routing set up, and I have a couple of components ready to go, but if even one can work I am certain the rest can be implemented without much problem

Thank you, and let me know if I can answer any questions that will help solve this.

Upvotes: 0

Views: 3466

Answers (1)

Jeremy
Jeremy

Reputation: 1288

I got this fixed. The issue was that I couldn't just wrap my appcomponent in a sidenav, but rather I needed to use all the same properties from the app-sidenav.component. So in the AppComponent, I changed it to the following:

<app-header></app-header>

<mat-sidenav-container class="main-sidenav">
  <mat-sidenav [disableClose]="true" autosize class="sidenav" mode="side" opened #sidenav>
    <app-sidenav></app-sidenav>
  </mat-sidenav>

  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Then, I moved the sidenav service to be part of the app component as well. By completely removing the <mat-sidenav>... and <mat-sidenav-content>... from the individual components, and instead putting them on the app module with exact specifications as before, this was able to work.

If you don't wrap the app component with the correct properties, Angular will attempt to change your margin properties and it will throw off the layout.

Upvotes: 1

Related Questions