<ng-container *ngIf="active$ | async">
  <ng-container *ngIf="(navigationGroups$ | async) as groups; else loadingTemplate">
    <ul
      *ngFor="let group of groups"
      class="op-souvap-navigation--group"
    >
      <li
        class="op-souvap-navigation--item-header"
        [textContent]="group.name"
      >
      </li>
      <li
        *ngFor="let item of group.items"
        class="op-souvap-navigation--item"
      >
        <a
          class="op-souvap-navigation--item-link op-menu--item-action"
          [href]="item.link"
        >
          <img
            *ngIf="item.icon"
            class="op-souvap-navigation--item-icon"
            [src]="item.icon"/>
          <span [textContent]="item.name"></span>
        </a>
      </li>
    </ul>
  </ng-container>
</ng-container>
<ng-template #loadingTemplate>
  <op-content-loader
    class="op-add-existing-pane--loading"
    viewBox="0 0 200 70"
  >
    <svg:rect x="0" y="0" width="100%" height="20" rx="1"/>
    <svg:rect x="0" y="24" width="100%" height="20" rx="1"/>
    <svg:rect x="0" y="48" width="100%" height="20" rx="1"/>
  </op-content-loader>
</ng-template>