sc-portal/app/src/app/components/nav-menu/nav-menu.component.html

<nav class="navbar navbar-expand-sm navbar-dark">
  <ul class="navbar-nav flex-column w-100" *ngIf="isAuthenticated">
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['./']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
        <fa-icon [fixedWidth]="true" icon="home"></fa-icon>
        {{ 'navbar.menu.instances' | translate }}
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['./networking/networks']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
        <fa-icon [fixedWidth]="true" icon="network-wired"></fa-icon>
        {{ 'navbar.menu.networks' | translate }}
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['./networking/firewall-rules']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
        <fa-icon [fixedWidth]="true" icon="fire-alt"></fa-icon>
        {{ 'navbar.menu.firewallRules' | translate }}
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['./volumes']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
        <fa-icon [fixedWidth]="true" icon="database"></fa-icon>
        {{ 'navbar.menu.volumes' | translate }}
      </a>
    </li>
    <li class="dropdown-divider"></li>
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['./security']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
        <fa-icon [fixedWidth]="true" icon="shield-alt"></fa-icon>
        {{ 'navbar.menu.security' | translate }}
      </a>
    </li>
    <li class="dropdown-divider"></li>
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['./catalog/images']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
        <fa-icon [fixedWidth]="true" icon="layer-group"></fa-icon>
        {{ 'navbar.menu.images' | translate }}
      </a>
    </li>
    <li class="dropdown-divider"></li>
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['./help']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
        <fa-icon [fixedWidth]="true" icon="question-circle"></fa-icon>
        {{ 'navbar.menu.help' | translate }}
      </a>
    </li>
  </ul>
</nav>