fix(console): remove rehauled navigation #10863 (#10912)

# Which Problems Are Solved
The new breadcrumbs were causing problems with some more advanced
Zitadel setups. This pr removes the new breadcrumbs to revert to the old
navigation behaviour.

# How the Problems Are Solved
Most of the changes could be kept but those specific to the navigation
where mostly reverted.

# Additional Changes
Updated some dependencies.

# Additional Context
- Closes #10863

console/src/app/modules/header/header.component.html

@@ -4,11 +4,7 @@
       <mat-spinner [diameter]="20"></mat-spinner>
     </div>
     <ng-template #logo>
-      <a
-        class="title custom"
-        [routerLink]="(['iam.read', 'iam.policy.read'] | hasRole | async) ? ['/'] : ['/org']"
-        *ngIf="authService.labelpolicy$ | async as lP; else defaultHome"
-      >
+      <a class="title custom" [routerLink]="['/']" *ngIf="authService.labelpolicy$ | async as lP; else defaultHome">
         <img
           class="logo"
           alt="home logo"
@@ -41,7 +37,141 @@
       </a>
     </ng-template>
 
-    <cnsl-new-header></cnsl-new-header>
+    <ng-container *ngFor="let bread of breadcrumbService.breadcrumbs$ | async as bc; index as i">
+      <ng-container *ngIf="bread.type === BreadcrumbType.INSTANCE">
+        <ng-template cnslHasRole [hasRole]="['iam.read']">
+          <svg
+            class="slash hide-on-small"
+            viewBox="0 0 24 24"
+            width="32"
+            height="32"
+            stroke="currentColor"
+            stroke-width="1"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            shape-rendering="geometricPrecision"
+          >
+            <path d="M16.88 3.549L7.12 20.451"></path>
+          </svg>
+
+          <div class="breadcrumb-context hide-on-small">
+            <a matRipple [matRippleUnbounded]="false" class="breadcrumb-link" [routerLink]="bread.routerLink">
+              {{ 'MENU.INSTANCE' | translate }}
+            </a>
+          </div>
+        </ng-template>
+      </ng-container>
+
+      <ng-container *ngIf="bread.type === BreadcrumbType.ORG">
+        <svg
+          class="slash"
+          viewBox="0 0 24 24"
+          width="32"
+          height="32"
+          stroke="currentColor"
+          stroke-width="1"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          shape-rendering="geometricPrecision"
+        >
+          <path d="M16.88 3.549L7.12 20.451"></path>
+        </svg>
+
+        <div class="org-context">
+          <a
+            *ngIf="org() as org"
+            matRipple
+            [matRippleUnbounded]="false"
+            class="org-link"
+            id="orglink"
+            [routerLink]="['/org']"
+          >
+            {{ org.name ? org.name : 'NO NAME' }}</a
+          >
+
+          <div class="org-context-wrapper" *ngIf="org">
+            <button
+              cdkOverlayOrigin
+              #trigger="cdkOverlayOrigin"
+              matRipple
+              [matRippleUnbounded]="false"
+              id="orgswitchbutton"
+              class="org-switch-button"
+              (click)="showOrgContext = !showOrgContext"
+            >
+              <span class="svgspan">
+                <svg xmlns=" http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path
+                    fill-rule="evenodd"
+                    d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>
+              </span>
+              <cnsl-action-keys
+                (actionTriggered)="showOrgContext = !showOrgContext"
+                [type]="ActionKeysType.ORGSWITCHER"
+              ></cnsl-action-keys>
+            </button>
+
+            <ng-template
+              cdkConnectedOverlay
+              [cdkConnectedOverlayOrigin]="trigger"
+              [cdkConnectedOverlayOffsetY]="10"
+              [cdkConnectedOverlayHasBackdrop]="true"
+              [cdkConnectedOverlayPositions]="positions"
+              cdkConnectedOverlayBackdropClass="transparent-backdrop"
+              [cdkConnectedOverlayOpen]="showOrgContext"
+              (backdropClick)="showOrgContext = false"
+              (detach)="showOrgContext = false"
+            >
+              <cnsl-org-context
+                class="context_card"
+                *ngIf="showOrgContext && org() as org"
+                (closedCard)="showOrgContext = false"
+                [org]="org"
+                (setOrg)="setActiveOrg($event)"
+              >
+              </cnsl-org-context>
+            </ng-template>
+          </div>
+        </div>
+      </ng-container>
+
+      <ng-container *ngIf="bread.type !== BreadcrumbType.INSTANCE && bread.type !== BreadcrumbType.ORG">
+        <svg
+          class="slash"
+          viewBox="0 0 24 24"
+          width="32"
+          height="32"
+          stroke="currentColor"
+          stroke-width="1"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          shape-rendering="geometricPrecision"
+        >
+          <path d="M16.88 3.549L7.12 20.451"></path>
+        </svg>
+
+        <div class="breadcrumb-context">
+          <a
+            matRipple
+            [matRippleUnbounded]="false"
+            class="breadcrumb-link"
+            [ngClass]="{ maxwidth: bc.length > 1 }"
+            [routerLink]="bread.routerLink"
+          >
+            <ng-container *ngIf="i !== bc.length - 1; else defLabel">
+              <span class="desk">{{ bread.name }}</span>
+              <span class="mob">...</span>
+            </ng-container>
+            <ng-template #defLabel>
+              <span>{{ bread.name }}</span>
+            </ng-template>
+          </a>
+        </div>
+      </ng-container>
+    </ng-container>
 
     <span class="fill-space"></span>
 
@@ -55,6 +185,33 @@
       </a>
     </ng-container>
 
+    <div class="system-rel" *ngIf="!isOnMe">
+      <a
+        id="systembutton"
+        *ngIf="!isOnInstance && (['iam.read$', 'iam.write$'] | hasRole | async)"
+        [routerLink]="['/instance']"
+        class="iam-settings"
+        mat-stroked-button
+      >
+        <div class="cnsl-action-button">
+          <span class="iam-label">{{ 'MENU.INSTANCE' | translate }}</span>
+          <i class="las la-cog"></i>
+        </div>
+      </a>
+      <a
+        id="orgbutton"
+        *ngIf="isOnInstance && (['org.read'] | hasRole | async)"
+        [routerLink]="['/org']"
+        class="org-settings"
+        mat-stroked-button
+      >
+        <div class="cnsl-action-button">
+          <span class="iam-label">{{ 'MENU.ORGANIZATION' | translate }}</span>
+          <i class="las la-cog"></i>
+        </div>
+      </a>
+    </div>
+
     <ng-container *ngIf="user && user.id">
       <div class="account-card-wrapper">
         <button