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

<ng-container *ngIf="(authService.user | async) || {} as user">
    <ng-container *ngIf="((['iam.read$','iam.write$'] | hasRole)) as iamuser$">
        <mat-toolbar class="root-header">
            <button aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
                <i class="icon las la-bars"></i>
            </button>
            <a *ngIf="(isHandset$ | async) == false" class="title" [routerLink]="['/']">
                <img class="logo" alt="zitadel logo" *ngIf="componentCssClass == 'dark-theme'; else lighttheme"
                    src="../assets/images/zitadel-logo-light.svg" />
                <ng-template #lighttheme>
                    <img alt="zitadel logo" class="logo" src="../assets/images/zitadel-logo-dark.svg" />
                </ng-template>
            </a>

            <button (click)="loadOrgs()" *ngIf="profile?.id && org" mat-button [matMenuTriggerFor]="menu"
                (menuOpened)="focusFilter()">{{org?.name ? org.name : 'NO NAME'}}
                <mat-icon>
                    arrow_drop_down</mat-icon>
            </button>

            <mat-menu class="menu" #menu="matMenu">
                <div class="spinner-w">
                    <mat-spinner diameter="20" *ngIf="orgLoading$ | async" color="accent">
                    </mat-spinner>
                </div>

                <div class="filter-wrapper">
                    <input cnslInput class="filter-input" [formControl]="filterControl" autocomplete="off"
                        (click)="$event.stopPropagation()" placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}"
                        #input>
                </div>

                <div class="org-wrapper">
                    <button [ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id"
                        *ngFor="let temporg of orgs$ | async" mat-menu-item (click)="setActiveOrg(temporg)">
                        {{temporg?.name ? temporg.name : 'NO NAME'}}
                    </button>
                </div>

                <button class="show-all" mat-menu-item
                    [routerLink]="[ '/org/overview' ]">{{'MENU.SHOWORGS' | translate}}</button>

                <ng-template appHasRole [appHasRole]="['org.create','iam.write']">
                    <button mat-menu-item [routerLink]="[ '/org/create' ]">
                        <mat-icon class="avatar">add</mat-icon>
                        {{'MENU.NEWORG' | translate}}
                    </button>
                </ng-template>
            </mat-menu>
            <span class="fill-space"></span>

            <a class="doc-link" href="https://docs.zitadel.ch" mat-stroked-button
                target="_blank">{{'MENU.DOCUMENTATION' | translate}}</a>
            <div (clickOutside)="closeAccountCard()" class="icon-container">
                <app-avatar *ngIf="user && (user.displayName || (user.firstName && user.lastName))"
                    class="avatar dontcloseonclick" (click)="showAccount = !showAccount" [active]="showAccount"
                    [name]="user.displayName ? user.displayName : (user.firstName + ' '+ user.lastName)" [size]="38">
                </app-avatar>
                <app-accounts-card @accounts class="a_card  mat-elevation-z5" *ngIf="showAccount"
                    (close)="showAccount = false" [profile]="profile" [iamuser]="iamuser$ | async">
                </app-accounts-card>
            </div>
        </mat-toolbar>
        <mat-drawer-container class="main-container">
            <mat-drawer #drawer class="sidenav" [mode]="(isHandset$ | async) ? 'over' : 'side'"
                [opened]="!(isHandset$ | async)">
                <div class="side-column">
                    <div class="list">
                        <ng-container *ngIf="authenticationService.authenticationChanged | async">
                            <a @navitem matTooltip="{{'MENU.TOOLTIP.PERSONAL' | translate}}" class="nav-item"
                                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"
                                [routerLink]="['/users/me']">
                                <i class="icon las la-user-circle"></i>
                                <span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
                            </a>
                        </ng-container>

                        <div *ngIf="org" [@navAnimation]="org">
                            <ng-template appHasRole
                                [appHasRole]="['org.read', 'project.read(:[0-9]*)?', 'user.read(:[0-9]*)?', 'user.grant.read(:[0-9]*)?']">
                                <div @navitem class="divider">
                                    <div class="line"></div>
                                    <span>{{org?.name ? org.name : ('MENU.ORGSECTION' | translate)}}</span>
                                    <div class="hiddenline"></div>
                                </div>
                            </ng-template>

                            <ng-template appHasRole [appHasRole]="['org.read']">
                                <a @navitem matTooltip="{{'MENU.TOOLTIP.ORG' | translate}}" class="nav-item"
                                    [routerLinkActive]="['active']" [routerLink]="[ '/org']">
                                    <i class="icon las la-archway"></i>
                                    <span class="label">{{'MENU.ORGANIZATION' | translate}}</span>
                                </a>
                            </ng-template>

                            <ng-template appHasRole [appHasRole]="['project.read(:[0-9]*)?']">
                                <a @navitem matTooltip="{{'MENU.TOOLTIP.SELFPROJECTS' | translate}}" class="nav-item"
                                    [routerLinkActive]="['active']" [routerLink]="[ '/projects']">
                                    <i class="icon las la-layer-group"></i>

                                    <div class="c_label">
                                        <span> {{'MENU.PROJECT' | translate}} </span>
                                        <span *ngIf="(mgmtService?.ownedProjectsCount | async)"
                                            class="count">{{mgmtService?.ownedProjectsCount | async}}</span>
                                    </div>
                                </a>

                                <a @navitem matTooltip="{{'MENU.TOOLTIP.GRANTEDPROJECTS' | translate}}"
                                    *ngIf="mgmtService?.grantedProjectsCount && (mgmtService?.grantedProjectsCount | async)"
                                    class="nav-item" [routerLinkActive]="['active']"
                                    [routerLink]="[ '/granted-projects']">
                                    <i class="icon las la-layer-group"></i>
                                    <div class="c_label">
                                        <span>{{ 'MENU.GRANTEDPROJECT' | translate }}</span>
                                        <span class="count">{{mgmtService?.grantedProjectsCount | async}}</span>
                                    </div>
                                </a>
                            </ng-template>

                            <ng-template appHasRole [appHasRole]="['user.read(:[0-9]*)?']">
                                <a @navitem matTooltip="{{'MENU.TOOLTIP.HUMANUSERS' | translate}}" class="nav-item"
                                    [routerLinkActive]="['active']" [routerLink]="[ '/users/list/humans']"
                                    [routerLinkActiveOptions]="{ exact: true }">
                                    <i class="icon las la-user-friends"></i>
                                    <span class="label">{{ 'MENU.HUMANUSERS' | translate }}</span>
                                </a>

                                <a @navitem matTooltip="{{'MENU.TOOLTIP.MACHINEUSERS' | translate}}" class="nav-item"
                                    [routerLinkActive]="['active']" [routerLink]="[ '/users/list/machines']"
                                    [routerLinkActiveOptions]="{ exact: true }">
                                    <i class="icon las la-users-cog"></i>
                                    <span class="label">{{ 'MENU.MACHINEUSERS' | translate }}</span>
                                </a>
                            </ng-template>

                            <ng-template appHasRole [appHasRole]="['user.grant.read(:[0-9]*)?']">
                                <a @navitem matTooltip="{{'MENU.TOOLTIP.AUTHZ' | translate}}" class="nav-item"
                                    [routerLinkActive]="['active']" [routerLink]="[ '/grants']"
                                    [routerLinkActiveOptions]="{ exact: true }">
                                    <i class="icon las la-shield-alt"></i>
                                    <span class="label">{{ 'MENU.GRANTS' | translate }}</span>
                                </a>
                            </ng-template>
                        </div>

                        <ng-container *ngIf="iamuser$ | async">
                            <div @navitem class="divider">
                                <div class="line"></div>
                                <span>{{'MENU.ADMINSECTION' | translate}}</span>
                                <div class="hiddenline"></div>
                            </div>
                            <a @navitem matTooltip="{{'MENU.TOOLTIP.IAMPOLICIES' | translate}}" class="nav-item"
                                [routerLinkActive]="['active']" [routerLink]="[ '/iam','policies']">
                                <i class="icon las la-gem"></i>
                                <span class="label">{{'MENU.IAMPOLICIES' | translate}}</span>
                            </a>

                            <a @navitem matTooltip="{{'MENU.TOOLTIP.IAMEVENTSTORE' | translate}}" class="nav-item"
                                [routerLinkActive]="['active']" [routerLink]="[ '/iam', 'eventstore']">
                                <i class="icon las la-gem"></i>
                                <span class="label">{{'MENU.IAMEVENTSTORE' | translate}}</span>
                            </a>
                        </ng-container>

                        <span class="fill-space"></span>
                    </div>
                    <span class="fill-space"></span>
                </div>
            </mat-drawer>
            <mat-drawer-content class="content">
                <div class="router" [@routeAnimations]="prepareRoute(outlet)">
                    <router-outlet #outlet="outlet"></router-outlet>
                </div>
            </mat-drawer-content>
        </mat-drawer-container>
        <div @adminline *ngIf="iamuser$ | async" class="admin-line" [ngClass]="{'expanded': !hideAdminWarn}"
            matTooltip="IAM Administrator">
            <button [matTooltip]="!hideAdminWarn ? 'Unpin': 'Pin'" (click)="toggleAdminHide()" mat-icon-button>
                <mat-icon *ngIf="!hideAdminWarn" svgIcon="mdi_pin"></mat-icon>
                <mat-icon *ngIf="hideAdminWarn" svgIcon="mdi_pin_outline"></mat-icon>
            </button>
            <span>{{'MENU.IAMADMIN' | translate}}</span>
        </div>
    </ng-container>
</ng-container>