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
        "
        [ngSwitch]="breadc[0].type"
      >
        <div class="nav-row" @navrow>
          <ng-container *ngSwitchCase="BreadcrumbType.INSTANCE">
            <div class="nav-row-abs" @navroworg>
              <ng-template cnslHasRole [hasRole]="['iam.read']">
                <a
                  class="nav-item"
                  [routerLinkActiveOptions]="{ exact: false }"
                  [routerLinkActive]="['active']"
                  [routerLink]="['/instance']"
                >
                  <div class="c_label">
                    <span> {{ 'MENU.INSTANCEOVERVIEW' | translate }} </span>
                  </div>
                </a>

                <a
                  class="nav-item"
                  [routerLinkActiveOptions]="{ exact: true }"
                  [routerLinkActive]="['active']"
                  [routerLink]="['/orgs']"
                >
                  <div class="c_label">
                    <span> {{ 'MENU.ORGS' | translate }} </span>
                  </div>
                </a>

                <a
                  class="nav-item"
                  [routerLinkActiveOptions]="{ exact: false }"
                  [routerLinkActive]="['active']"
                  [routerLink]="['/views']"
                >
                  <div class="c_label">
                    <span> {{ 'MENU.VIEWS' | translate }} </span>
                  </div>
                </a>

                <a
                  class="nav-item"
                  [routerLinkActiveOptions]="{ exact: false }"
                  [routerLinkActive]="['active']"
                  [routerLink]="['/failed-events']"
                >
                  <div class="c_label">
                    <span> {{ 'MENU.FAILEDEVENTS' | translate }} </span>
                  </div>
                </a>

                <a
                  class="nav-item"
                  [routerLinkActiveOptions]="{ exact: false }"
                  [routerLinkActive]="['active']"
                  [routerLink]="['/settings']"
                >
                  <div class="c_label">
                    <span> {{ 'MENU.SETTINGS' | translate }} </span>
                  </div>
                </a>
              </ng-template>

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

          <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" [@navAnimation]="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>
                      <small
                        *ngIf="(mgmtService?.ownedProjectsCount | async) && (mgmtService?.grantedProjectsCount | async)"
                        class="count"
                        >({{
                          ((mgmtService?.ownedProjectsCount | async) ?? 0) +
                            ((mgmtService?.grantedProjectsCount | async) ?? 0)
                        }})</small
                      >
                    </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']"
                    [routerLink]="['/domains']"
                    [routerLinkActiveOptions]="{ exact: true }"
                  >
                    <span class="label">{{ 'MENU.DOMAINS' | translate }}</span>
                  </a>
                </ng-template>

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

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

          <!-- <ng-container *ngSwitchCase="BreadcrumbType.PROJECT">
            <div *ngIf="breadc[breadc.length - 1]?.param?.value" class="nav-row-abs" @navrowproject>
              <ng-template cnslHasRole [hasRole]="['project.read(:[0-9]*)?']">
                <a
                  class="nav-item"
                  [routerLinkActiveOptions]="{ exact: true }"
                  [routerLinkActive]="['active']"
                  [routerLink]="['/projects', breadc[breadc.length - 1]?.param?.value]"
                >
                  <div class="c_label">
                    <span> {{ 'MENU.PROJECTOVERVIEW' | translate }} </span>
                  </div>
                </a>
              </ng-template>

              <ng-template cnslHasRole [hasRole]="['project.read(:[0-9]*)?']">
                <a
                  *ngIf="!breadc[breadc.length - 1]?.isZitadel"
                  class="nav-item"
                  [routerLinkActiveOptions]="{ exact: false }"
                  [routerLinkActive]="['active']"
                  [routerLink]="['/projects', breadc[breadc.length - 1]?.param?.value, 'roles']"
                >
                  <div class="c_label">
                    <span> {{ 'MENU.ROLES' | translate }} </span>
                  </div>
                </a>
              </ng-template>

              <ng-template cnslHasRole [hasRole]="['project.read(:[0-9]*)?']">
                <a
                  *ngIf="!breadc[breadc.length - 1]?.isZitadel"
                  class="nav-item"
                  [routerLinkActiveOptions]="{ exact: false }"
                  [routerLinkActive]="['active']"
                  [routerLink]="['/projects', breadc[breadc.length - 1]?.param?.value, 'projectgrants']"
                >
                  <div class="c_label">
                    <span> {{ 'MENU.PROJECTGRANTS' | translate }} </span>
                  </div>
                </a>
              </ng-template>

              <ng-template cnslHasRole [hasRole]="['project.read(:[0-9]*)?']">
                <a
                  *ngIf="!breadc[breadc.length - 1]?.isZitadel"
                  class="nav-item"
                  [routerLinkActiveOptions]="{ exact: true }"
                  [routerLinkActive]="['active']"
                  [routerLink]="['/projects', breadc[breadc.length - 1]?.param?.value, 'grants']"
                >
                  <div class="c_label">
                    <span> {{ 'MENU.GRANTS' | translate }} </span>
                  </div>
                </a>
              </ng-template>

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

<ng-template #shortcutKeyRef>
  <ng-container *ngIf="(isHandset$ | async) === false">
    <span class="fill-space"></span>
    <div class="nav-shortcut-action-key" matTooltip="{{ 'MENU.OPENSHORTCUTSTOOLTIP' | translate }}">
      <div class="nav-key-overlay"></div>
      <span>?</span>
    </div>
  </ng-container>
</ng-template>