mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-18 05:52:51 +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 <[email protected]> Co-authored-by: Stefan Benz <[email protected]> Co-authored-by: Florian Forster <[email protected]>
47 lines
1.2 KiB
SCSS
47 lines
1.2 KiB
SCSS
@mixin header-dropdown-theme($theme) {
|
|
$foreground: map-get($theme, foreground);
|
|
$background: map-get($theme, background);
|
|
$is-dark-theme: map-get($theme, is-dark);
|
|
$border-radius: 0.5rem;
|
|
|
|
.dropdown-content {
|
|
max-height: 50vh;
|
|
min-width: 300px;
|
|
max-width: 80vw;
|
|
border-radius: $border-radius;
|
|
border: 1px solid rgba(#8795a1, 0.2);
|
|
box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
|
|
background: map-get($background, cards);
|
|
display: grid;
|
|
grid-template-rows: minmax(0, 1fr);
|
|
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
|
}
|
|
|
|
@media only screen and (max-width: 599px) {
|
|
.dropdown-content {
|
|
width: 100vw;
|
|
max-width: 100vw;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
.dropdown-content > :first-child > :first-child {
|
|
border-top-left-radius: $border-radius;
|
|
}
|
|
|
|
.dropdown-content > :last-child > :first-child {
|
|
border-top-right-radius: $border-radius;
|
|
}
|
|
|
|
@media only screen and (min-width: 599px) {
|
|
.dropdown-content > :first-child > :last-child {
|
|
border-bottom-left-radius: $border-radius;
|
|
}
|
|
|
|
.dropdown-content > :last-child > :last-child {
|
|
border-bottom-right-radius: $border-radius;
|
|
}
|
|
}
|
|
}
|