mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-27 22:06:47 +00:00
f963ea9f86
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 <mail@conblem.me> Co-authored-by: Stefan Benz <46600784+stebenz@users.noreply.github.com> Co-authored-by: Florian Forster <florian@zitadel.com>
16 lines
554 B
HTML
16 lines
554 B
HTML
<!-- the cdk overlay doesn't like it's properties being changed that's why we used the ng if to rerender it -->
|
|
<ng-template
|
|
*ngIf="isOpen$ | async as isOpen"
|
|
cdkConnectedOverlay
|
|
[cdkConnectedOverlayOrigin]="trigger"
|
|
[cdkConnectedOverlayOpen]="isOpen"
|
|
[cdkConnectedOverlayPositionStrategy]="positionStrategy()"
|
|
[cdkConnectedOverlayScrollStrategy]="scrollStrategy"
|
|
[cdkConnectedOverlayHasBackdrop]="isHandset()"
|
|
(overlayOutsideClick)="closed.emit()"
|
|
>
|
|
<div class="dropdown-content">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
</ng-template>
|