zitadel/console/src/app/modules/nav/nav.component.html

<ng-container *ngIf="['iam.read$', 'iam.write$'] | hasRole as iamuser$">
  <div class="nav-col" [ngClass]="{ 'is-admin': (iamuser$ | async) }">
    <ng-container
      *ngIf="breadcrumbService.breadcrumbsExtended$ && (breadcrumbService.breadcrumbsExtended$ | async) as breadc"
    >
      <ng-container
        *ngIf="
          breadc[breadc.length - 1] &&
          !breadc[breadc.length - 1].hideNav &&
          breadc[breadc.length - 1].type !== BreadcrumbType.AUTHUSER &&
          breadc[breadc.length - 1].type !== BreadcrumbType.INSTANCE
        "
        [ngSwitch]="breadc[0].type"
      >
        <div class="nav-row" @navrow>
          <ng-container *ngSwitchCase="BreadcrumbType.ORG">
            <div class="nav-row-abs" @navrowproject>
              <a
                class="nav-item"
                [routerLinkActive]="['active']"
                [routerLinkActiveOptions]="{ exact: true }"
                [routerLink]="['/']"
              >
                <span class="label">{{ 'MENU.DASHBOARD' | translate }}</span>
              </a>

              <ng-container class="org-list" *ngIf="org">
                <ng-template cnslHasRole [hasRole]="['org.read']">
                  <a
                    class="nav-item"
                    [routerLinkActive]="['active']"
                    [routerLinkActiveOptions]="{ exact: false }"
                    [routerLink]="['/org']"
                  >
                    <span class="label">{{ 'MENU.ORGANIZATION' | translate }}</span>
                  </a>
                </ng-template>

                <ng-template cnslHasRole [hasRole]="['project.read(:[0-9]*)?']">
                  <a
                    class="nav-item"
                    [routerLinkActive]="['active']"
                    [routerLinkActiveOptions]="{ exact: false }"
                    [routerLink]="['/projects']"
                  >
                    <div class="c_label">
                      <span> {{ 'MENU.PROJECT' | translate }} </span>
                      <ng-container *ngIf="projectcounter | async as count">
                        <div *ngIf="count < 100" class="count">
                          <span>{{ count }}</span>
                        </div>
                        <div *ngIf="count >= 100" class="count">
                          <span>99+</span>
                        </div>
                      </ng-container>
                    </div>
                  </a>
                </ng-template>

                <ng-template cnslHasRole [hasRole]="['user.read(:[0-9]*)?']">
                  <a
                    class="nav-item"
                    [routerLinkActive]="['active']"
                    [routerLink]="['/users']"
                    [routerLinkActiveOptions]="{ exact: false }"
                  >
                    <span class="label">{{ 'MENU.HUMANUSERS' | translate }}</span>
                  </a>
                </ng-template>

                <ng-template cnslHasRole [hasRole]="['user.grant.read(:[0-9]*)?']">
                  <a
                    class="nav-item"
                    [routerLinkActive]="['active']"
                    [routerLink]="['/grants']"
                    [routerLinkActiveOptions]="{ exact: true }"
                  >
                    <span class="label">{{ 'MENU.GRANTS' | translate }}</span>
                  </a>
                </ng-template>

                <ng-template cnslHasRole [hasRole]="['org.action.read']">
                  <a
                    class="nav-item"
                    [routerLinkActive]="['active']"
                    [routerLink]="['/actions']"
                    [routerLinkActiveOptions]="{ exact: true }"
                  >
                    <span class="label">{{ 'MENU.ACTIONS' | translate }}</span>
                  </a>
                </ng-template>

                <ng-template cnslHasRole [hasRole]="['org.read']">
                  <a
                    class="nav-item"
                    [routerLinkActive]="['active']"
                    [routerLinkActiveOptions]="{ exact: false }"
                    [routerLink]="['/org-settings']"
                    *ngIf="
                      (['policy.read'] | hasRole | async) &&
                      ((['iam.read$', 'iam.write$'] | hasRole | async) === false ||
                        (((authService.cachedOrgs | async)?.length ?? 1) > 1 &&
                          (['iam.read$', 'iam.write$'] | hasRole | async)))
                    "
                  >
                    <span class="label">{{ 'MENU.SETTINGS' | translate }}</span>
                  </a>
                </ng-template>
              </ng-container>

              <template [ngTemplateOutlet]="shortcutKeyRef"></template>
            </div>
          </ng-container>
        </div>
      </ng-container>
    </ng-container>
  </div>
</ng-container>

<ng-template #shortcutKeyRef>
  <ng-container *ngIf="(isHandset$ | async) === false">
    <ng-template cnslHasRole [hasRole]="['iam.read']">
      <span class="fill-space"></span>
      <ng-container *ngIf="!adminService.hideOnboarding && (adminService.progressAllDone | async) === false">
        <div
          cdkOverlayOrigin
          role="button"
          #trigger="cdkOverlayOrigin"
          matRipple
          class="progress-bar"
          (click)="showInstanceProgress = !showInstanceProgress"
        >
          <div class="progress-div">
            <mat-progress-bar
              class="progress"
              mode="determinate"
              [value]="adminService.progressPercentage | async"
            ></mat-progress-bar>
          </div>
        </div>

        <ng-template
          cdkConnectedOverlay
          [cdkConnectedOverlayOrigin]="trigger"
          [cdkConnectedOverlayOffsetY]="10"
          [cdkConnectedOverlayHasBackdrop]="true"
          [cdkConnectedOverlayPositions]="positions"
          cdkConnectedOverlayBackdropClass="transparent-backdrop"
          [cdkConnectedOverlayOpen]="showInstanceProgress"
          (backdropClick)="showInstanceProgress = false"
          (detach)="showInstanceProgress = false"
        >
          <cnsl-onboarding-card
            (dismissedCard)="dismissOnboarding()"
            class="onboarding_card"
            *ngIf="org && showInstanceProgress"
          >
          </cnsl-onboarding-card>
        </ng-template>
      </ng-container>
    </ng-template>

    <div
      (click)="openHelp()"
      class="nav-shortcut-action-key"
      tabindex="0"
      matTooltip="{{ 'MENU.OPENSHORTCUTSTOOLTIP' | translate }}"
    >
      <div class="nav-key-overlay"></div>
      <span>?</span>
    </div>
  </ng-container>
</ng-template>