andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-10-21 15:04:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): rehauled navigation for instances including breadcrumb (#10283)

Browse Source 
This PR significantly improves user navigation by introducing a new
instance-level navigation bar. This new bar, positioned above the
existing organization navigation, provides quick access to key sections:
Home, Organizations, Actions, and Settings.

Additionally, the breadcrumb component has been refined for more
consistent behavior, reintroducing intuitive breadcrumb buttons to
easily navigate up the hierarchy. These changes also include design
improvements for a cleaner and more streamlined appearance across the
interface.

<img width="423" height="138" alt="Screenshot 2025-07-17 at 14 55 46"
src="https://github.com/user-attachments/assets/ba9e40a1-1077-4cb6-8735-ac7ab637abe7"
/>
<img width="562" height="132" alt="Screenshot 2025-07-17 at 14 56 41"
src="https://github.com/user-attachments/assets/d85dc673-0df8-4677-9d2b-dc031dde42c3"
/>
<img width="545" height="254" alt="Screenshot 2025-07-17 at 14 56 10"
src="https://github.com/user-attachments/assets/eaf10117-079e-4181-8dbb-60c89b24556a"
/>
<img width="689" height="261" alt="Screenshot 2025-07-17 at 14 56 20"
src="https://github.com/user-attachments/assets/510ad550-1d9a-4c6a-8af1-66cb0b23619c"
/>

---------

Co-authored-by: conblem <[email protected]>
Co-authored-by: Stefan Benz <[email protected]>
Co-authored-by: Florian Forster <[email protected]>
This commit is contained in:
Max Peintner
2025-08-28 11:23:14 +02:00
committed by GitHub
co-authored by conblem Stefan Benz Florian Forster
parent cccba3f8f3
commit f963ea9f86
117 changed files with 3286 additions and 2360 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/header/header.component.ts
+10 -9
View File
@@ -1,12 +1,13 @@
import { ConnectedPosition, ConnectionPositionPair } from '@angular/cdk/overlay';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Router } from '@angular/router';
import { Org } from 'src/app/proto/generated/zitadel/org_pb';
import { User } from 'src/app/proto/generated/zitadel/user_pb';
import { BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ActionKeysType } from '../action-keys/action-keys.component';
import { NewOrganizationService } from '../../services/new-organization.service';
import { Organization } from '@zitadel/proto/zitadel/org/v2/org_pb';
@Component({
selector: 'cnsl-header',
@@ -18,11 +19,11 @@ export class HeaderComponent {
@Input({ required: true }) public user!: User.AsObject;
public showOrgContext: boolean = false;
@Input() public org!: Org.AsObject;
@Output() public changedActiveOrg: EventEmitter<Org.AsObject> = new EventEmitter();
@Input() public org?: Organization | null;
@Output() public changedActiveOrg = new EventEmitter<void>();
public showAccount: boolean = false;
public BreadcrumbType: any = BreadcrumbType;
public ActionKeysType: any = ActionKeysType;
protected readonly BreadcrumbType = BreadcrumbType;
protected readonly ActionKeysType = ActionKeysType;
public positions: ConnectedPosition[] = [
new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }, 0, 10),
@@ -38,12 +39,12 @@ export class HeaderComponent {
public mgmtService: ManagementService,
public breadcrumbService: BreadcrumbService,
public router: Router,
private readonly newOrganizationService: NewOrganizationService,
) {}
public setActiveOrg(org: Org.AsObject): void {
this.org = org;
this.authService.setActiveOrg(org);
this.changedActiveOrg.emit(org);
public async setActiveOrg(orgId: string): Promise<void> {
await this.newOrganizationService.setOrgId(orgId);
this.changedActiveOrg.emit();
}
public get isOnMe(): boolean {