How to set default state to closed for sidenav nav-links in vmware-clarity, Angular6

Question

When I create a sidenav in vmware-clarity, the nav-links and nav-groups are all opened by default.

Is there a way to have them be closed by default?

 <ng-container *ngFor="let data of model">
    <a [routerLink]="data.routerLink" class="nav-link" *ngIf="data.items == null">
        {{data.label}}
    </a>
    <section class="nav-group collapsible"  *ngIf="data.items != null">
        <input id="{{data.label}}" type="checkbox">
        <label for="{{data.label}}">{{data.label}}</label>
        <ul class="nav-list">
            <li><a class="nav-link" *ngFor="let item of data.items" [routerLink]="item.routerLink">{{item.label}}</a></li>
        </ul>
    </section>
</ng-container>

This is how they show up when the page loads:

And what I want to have happen on load:

Thanks for any help!

Answer 1

All you need to do is pre-check the checkbox of every section you want to pre-collapse. Using your example, all you need to add is a checked attribute on the checkbox input in your *ngFor loop:

<input id="{{data.label}}" type="checkbox" checked>

Here is a running example showing one section that starts collapsed, and one that starts expanded: https://stackblitz.com/edit/clarity-sidenav-pre-collapsed?file=src/app/app.component.html The only difference between the two is the checked attribute.