How to place "mat-toolbar" on top of "mat-sidenav" Angular Material 5

Question

I'm writing here since I have a question about Mat Toolbar and Mat-sidenav from Angular Material. I'm trying to get the Sidenav to go under the toolbar and the toolbar always occupies the top part, something like this:

Example

Here´s my code:

I'm using the version 5.6.0 of Angular and Angular Material. I tried using CSS and also changing the order of the structure of the code, but this last one simply gave me errors and more errors; preventing the application from running.

Answer 1

Anything you put inside mat-sidenav-content appears beside the menu. The basic layout structure for toolbar above sidenav menu and content is:

<mat-toolbar>...</mat-toolbar>
<mat-sidenav-container>...</mat-sidenav-container>

Here's an example on StackBlitz.