How to use vnware clarity sidenav?

Question

I am trying to get the VMware Clarity user interface to work correctly and I will like a good example. I am using the seed transparency project and inside app.component.html. I have a default subordinate level that they provide:

<nav class="sub-nav" [clr-nav-level]="1">
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link" href="#" [routerLink]="['/home']"
               [class.active]="router.url==='/home' || router.url==='/'">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" [routerLink]="['/about']" [class.active]="router.url==='/about'">About</a>
        </li>
    </ul>
</nav>

I replaced their homepage as follows:

<nav class="sidenav">
    <section class="sidenav-content">
        <a class="nav-link" href="/test">Test</a>
    </section>
</nav>

Sidnav is displayed correctly, but when I click on the Test link, the entire application is updated, and the contents of my test page are displayed on the main page, but the subnav does not work. How to get the contents of the test page to the right of the subnav? You can view the GIST code here: https://gist.github.com/MichaelRegert/6c5d9d3c8b52aa99d1dc66a314239f0e

Answer 1

Plunk: https://plnkr.co/edit/3JnXm801uNlGWXz41BXD?p=preview

2 :

• . plunk, . .content-container .main-container, .content-area .sidenav .content-container - , flexbox.

• sidenav. plunk , Carity sidenav, angular. Stackoverflow.