Styling our sidebar and adding the menu items Great! LetРІР‚в„ўs add some menu items and styling to our sidebar navigation menu now. Lastly, weРІР‚в„ўve added some tweaks such as a rounded border and some elevation using the mat-elevation-z8 class which comes with material.Р”Р„s a result, we have our basic layout all set up like below. The fixed heights are there so the sections appear completely on the page (any scrolling will be inside of them). Then, weРІР‚в„ўve added margins for the sections to appear with some spacing between them. What weРІР‚в„ўve done here is add some background and foreground colors to setup our design. Here is how our file looks like for now. Styling our layout to give an elevated look LetРІР‚в„ўs now see how we added some styles to spice up the layout!

In our case, IРІР‚в„ўve just kept some text to show itРІР‚в„ўs the main content. YouРІР‚в„ўll most probably be using routes to show different sections of the site here. You could keep any content here, including a router-outlet. Mat-sidenav is your sidebar menu while mat-sidenav-content is the main content of your app. This has the mat-sidenav and the mat-sidenav-content sections inside of it.

The container is actually called the mat-sidenav-container. LetРІР‚в„ўs add the material toolbar and the material side navigation bar to our main file.Р”Р„s you can see, the material side navigation component has some parts to it. Great, now we can move on to add our components in the template!Р”Р„dding our toolbar and sidebar components Let us now import the modules we require in our , Ng add commands create an Angular app and add the Angular Material components library to it. LetРІР‚в„ўs first set up our Angular project by running the following commands on our terminal (with the Angular CLI).

Materialize angular