<div class="content-container">
    <clr-vertical-nav  [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="verticalNavCollapsed">
        <ng-container *ngFor="let nav of navItems">
            <clr-vertical-nav-group routerLinkActive="active">
                <clr-icon [attr.shape]="nav.iconShape" clrVerticalNavIcon></clr-icon>
                {{ nav.title }}
                <clr-vertical-nav-group-children *clrIfExpanded="true">
                    <ng-container *ngFor="let navItem of nav.children">
                        <a clrVerticalNavLink [routerLink]="navItem.routerLink" routerLinkActive="active">
                            {{ navItem.nameKey }}
                        </a>
                    </ng-container>
                </clr-vertical-nav-group-children>
            </clr-vertical-nav-group>
        </ng-container>
    </clr-vertical-nav>
    
    <div class="content-area">
        <router-outlet></router-outlet>
    </div>
</div>