Clarity Design Systems - Вертикальная навигация

Question

Я искал варианты вертикальной навигации на ясность. Я просто хотел бы знать, можно ли выровнять навигацию вправо?

пример кода, который я использовал для ясности, выглядит следующим образом:

<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>

Это работает отлично, но выравнивает навигацию по левому краю. Любой совет, как выровнять его по правому краю?

Answer 1

Ясность использует свойство flexbox order для выравнивания side-nav влево

Если вы хотите выровнять side-nav вправо, измените порядок negative до positive number или zero

.sidenav{
   flex: 0 0 auto;
   order: 1;
}

или

.main-container .content-container .clr-vertical-nav, .main-container .content-container .sidenav {
   flex: 0 0 auto;
   order: 1;
}