Angular 2 change sidenav content depending on the current router state

Question

I am developing single page application in Angular 2. I am using angular material mat-sidenav and mat-toolbar. Toolbar has sidenav toggle button, buttons to open 'Clients' section and 'Reports' section. This structure is common throughout the project.

So the app looks like this:

I have to change the content in the sidenav (and in the main field) depending on the current state of the router. So, if the 'Clients' section is opened the sidenav should show some subsections related to the clients. Similarly, for 'Reports' section only subsections related to the reports should be available. How do I do it?

Answer 1

I have figured out how to do this with the layout approach. You can see the example of implementation of the admin system using this approach here