[Fixed] Put fixed navbar and sidebar in all components of Angular app

Issue

So, I am new to angular and building a new angular app which will consist of multiple components and I want the navbar and sidebar to be fixed on all components of my app.

I built navbar and sidebar as separate components. I want the navbar and sidebar to be like this, with the app content(all the component content) being in the white part of the screen:

I know the navbar can be easily imported with html like <navbarComponent><navbarComponent>, but the sidebar is a bit problematic to me since I want the app-content to be on the right of the sidebar component, so the only solution I know is to make a container in css like this:

random-component-html:

<app-navigation-bar></app-navigation-bar>
<div class="d-flex container1">
  <div class="al-left">
<app-sidenav-bar></app-sidenav-bar>
</div>
<div class="al-right">
<div class="container">
<h2>Apps:</h2>

<mat-nav-list>
    <mat-list-item *ngFor="let app of apps"  (click)="redirect(app)"> 
       <button mat-icon-button> {{app.name}}
  
       </button>
    </mat-list-item>
  </mat-nav-list>
</div>
</div>
</div>

random-component-css:

.container1{
    width: 100%;
}

.al-left{
    float: left;
    max-width: 15vw;
}

.al-right{
    float: right;
    max-width: 85vw;
}

but I feel that there must be an easier way to do this. Does anybody know a solution?

Solution

You can route all your other components within this white block

Lets say:

<app-navigation-bar></app-navigation-bar>
<div class="d-flex container1">
  <div class="al-left">
      <app-sidenav-bar></app-sidenav-bar>
  </div>
    <div class="al-right">
        <div class="container">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>