How to properly use the vmware clarity sidenav?

Question

I'm trying to get the VMware Clarity UI sidenav properly working, and would love a solid example. I am using the clarity-seed project and inside of app.component.html I have the default sub-nave 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've replaced their home page with the following:

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

The sidenav shows up properly, but clicking the Test link causes the entire app to refresh and the content of my test page is shown under the Home page but the subnav is gone. How do I get the content of the Test page to appear to the right of the subnav? You can view the GIST of the code here: https://gist.github.com/MichaelRegert/6c5d9d3c8b52aa99d1dc66a314239f0e

Answer 1

Please refer to this Plunk: https://plnkr.co/edit/3JnXm801uNlGWXz41BXD?p=preview

There are 2 issues with your plunk:

1. You layout structure was incorrect. I fixed that in the plunk posted above. The .content-container is a direct child of the .main-container and the .content-area and the .sidenav are direct children of the .content-container because of the way flexbox works.

2. There is some issue with your routing using the sidenav. I haven't fixed that in the plunk above because that isn't an issue with Clarity sidenav but a general angular routing issue. You should open a separate Stackoverflow question for that.