Clarity Design Systems - Vertical Nav - vertical-alignment

Question

I was looking at the Vertical nav options on clarity. I would just like to know if its possible to right align the nav?
the example code I used on clarity is as follows:
<div class="main-container">
<header class="header">
...
</header>
<div class="content-container">
<div class="content-area">
<router-outlet></router-outlet>
</div>
<clr-vertical-nav>
<a clrVerticalNavLink routerLink="./charmander" routerLinkActive="active">Charmander</a>
<a clrVerticalNavLink routerLink="./jigglypuff" routerLinkActive="active">Jigglypuff</a>
<a clrVerticalNavLink routerLink="./pikachu" routerLinkActive="active">Pikachu</a>
<a clrVerticalNavLink routerLink="./raichu" routerLinkActive="active">Raichu</a>
<a clrVerticalNavLink routerLink="./snorlax" routerLinkActive="active">Snorlax</a>
<a clrVerticalNavLink routerLink="./credit" routerLinkActive="active">Credit</a>
</clr-vertical-nav>
</div>
This works perfectly but aligns the nav to the left margin. Any advise on how to align it to the right margin?

Answer 1

Clarity uses flexbox order property to align side-nav to left
If you want to align side-nav to right change the negative order
to positive number Or zero
.sidenav{
flex: 0 0 auto;
order: 1;
}
or
.main-container .content-container .clr-vertical-nav, .main-container .content-container .sidenav {
flex: 0 0 auto;
order: 1;
}