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

Scaphoid

Note, the reason I did the code this way is I only want the sidenav to show up under the Home link, but not the others. I may want a different sizenav for each subnav for example.... – Scaphoid

Hi @codemonkey_42: Can you replicate your example on plunker and post the plunker link? plnkr.co/8TwwdL Its difficult to replicate the issue by using gist – Defoe

@Defoe - I've created a Plunker here: plnkr.co/edit/agpFFphxDWC2IEpM3H6g?p=preview – Scaphoid

@Defoe - I've update the Plunker here: plnkr.co/edit/ui8jhi?p=preview – Scaphoid

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.

Defoe

So I guess I don't understand how to target the content-area that you placed above the sidenav vs the main content-area. – Scaphoid

@Defoe is correct. You can see an example of how to use Header as primary navigation and sidenav as secondary navigation here: vmware.github.io/clarity/documentation/navigation In that example, your component with the sidenav would be one of the primary navigation routes and include the sidenav component in its template. Other components in your primary navigation would not. – Kaisership