diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html index 9c9187479b..b36473c797 100644 --- a/ui-ngx/src/app/modules/home/home.component.html +++ b/ui-ngx/src/app/modules/home/home.component.html @@ -15,42 +15,40 @@ limitations under the License. --> - + + [opened]="sidenavOpened && !forceFullscreen">
-
- @if (showLogo()) { - - } - @if (sidenavDesktop()) { - - } -
+ + + @if (sidenavDesktop()) { + + }
- +
- + - +
- @if (tbShowCloseButton) { + @if (tbShowCloseButton && !tbMenu) {
×
}
@@ -389,6 +391,7 @@ export class TbPopoverComponent implements OnDestroy, OnInit { tbPopoverInnerStyle: { [klass: string]: any } = {}; tbPopoverInnerContentStyle: { [klass: string]: any } = {}; tbBackdrop = false; + tbMenu = false; tbMouseEnterDelay?: number; tbMouseLeaveDelay?: number; tbHideOnClickOutside = true; @@ -672,7 +675,8 @@ export class TbPopoverComponent implements OnDestroy, OnInit { updateStyles(): void { this.classMap = { [`tb-popover-placement-${this.preferredPlacement}`]: true, - ['tb-popover-hidden']: this.tbHidden || !this.lastIsIntersecting + ['tb-popover-hidden']: this.tbHidden || !this.lastIsIntersecting, + ['tb-menu']: this.tbMenu }; if (this.tbOverlayClassName) { this.classMap[this.tbOverlayClassName] = true; diff --git a/ui-ngx/src/app/shared/components/user-menu.component.html b/ui-ngx/src/app/shared/components/user-menu.component.html index 102a3f6120..e9c0f69b51 100644 --- a/ui-ngx/src/app/shared/components/user-menu.component.html +++ b/ui-ngx/src/app/shared/components/user-menu.component.html @@ -15,10 +15,16 @@ limitations under the License. --> - - + @if (authority$ | async; as authority) { -
- -
} - + diff --git a/ui-ngx/src/app/shared/components/user-menu.component.scss b/ui-ngx/src/app/shared/components/user-menu.component.scss index 4f44dcb028..2edda733d2 100644 --- a/ui-ngx/src/app/shared/components/user-menu.component.scss +++ b/ui-ngx/src/app/shared/components/user-menu.component.scss @@ -14,6 +14,8 @@ * limitations under the License. */ +@import "constants"; + tb-user-menu { width: 100%; @@ -27,6 +29,15 @@ tb-user-menu { gap: 8px; line-height: 1.5; + .tb-user-info { + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: center; + opacity: 1; + transition: opacity $sidenav-anim-timing; + } + span { text-transform: none; text-align: start; @@ -52,29 +63,38 @@ tb-user-menu { height: 32px; font-size: 32px; margin: 0; + transition: all $sidenav-anim-timing; + } + &.tb-collapsed { + min-width: 0; + .mat-icon.tb-mini-avatar { + width: 20px; + height: 20px; + font-size: 20px; + } + + .tb-user-info { + opacity: 0; + } } } } -.mat-mdc-menu-panel.tb-user-menu-panel { - max-width: 100%; - .tb-user-menu-items { - //min-width: 250px; - display: flex; - flex-direction: column; - gap: 8px; - --mat-menu-item-label-text-size: 14px; - --mat-menu-item-label-text-line-height: 20px; - --mat-menu-item-spacing: 8px; - --mat-menu-item-icon-size: 18px; - .mat-icon { - font-size: 18px; - } - .mat-mdc-menu-item { - min-height: 40px; - &.tb-logout { - border-top: 1px solid rgba(0, 0, 0, 0.12); - } +.tb-popover.tb-menu.tb-user-menu-collapsed { + padding: 0 0 17px 0; +} + +.tb-user-menu-items { + min-width: 250px; + display: flex; + flex-direction: column; + gap: 8px; + .mat-mdc-button { + &:hover { + background-color: rgba(0, 0, 0, .07); } } + .tb-logout { + border-top: 1px solid rgba(0, 0, 0, 0.12); + } } diff --git a/ui-ngx/src/app/shared/components/user-menu.component.ts b/ui-ngx/src/app/shared/components/user-menu.component.ts index 201979bfae..e584d36feb 100644 --- a/ui-ngx/src/app/shared/components/user-menu.component.ts +++ b/ui-ngx/src/app/shared/components/user-menu.component.ts @@ -16,10 +16,10 @@ import { ChangeDetectionStrategy, - Component, + Component, EventEmitter, Input, OnDestroy, - OnInit, + OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core'; @@ -32,6 +32,7 @@ import { map } from 'rxjs/operators'; import { AuthService } from '@core/auth/auth.service'; import { Router } from '@angular/router'; import { MatMenu, MatMenuTrigger } from '@angular/material/menu'; +import { coerceBoolean } from '@shared/decorators/coercion'; @Component({ selector: 'tb-user-menu', @@ -43,6 +44,13 @@ import { MatMenu, MatMenuTrigger } from '@angular/material/menu'; }) export class UserMenuComponent implements OnInit, OnDestroy { + @Input() + @coerceBoolean() + collapsed = false; + + @Output() + menuClicked = new EventEmitter(); + authorities = Authority; authority$ = this.store.pipe( @@ -112,10 +120,12 @@ export class UserMenuComponent implements OnInit, OnDestroy { } openAccount(): void { + this.menuClicked.emit(); this.router.navigate(['account']); } logout(): void { + this.menuClicked.emit(); this.authService.logout(); } diff --git a/ui-ngx/src/assets/small_logo_title_black.svg b/ui-ngx/src/assets/small_logo_title_black.svg new file mode 100644 index 0000000000..dcbe6a365c --- /dev/null +++ b/ui-ngx/src/assets/small_logo_title_black.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui-ngx/src/scss/constants.scss b/ui-ngx/src/scss/constants.scss index 914e20e4ee..5d197c2532 100644 --- a/ui-ngx/src/scss/constants.scss +++ b/ui-ngx/src/scss/constants.scss @@ -40,3 +40,5 @@ $tb-hue3-color: #a7c1de; $tb-dark-primary-color: #9fa8da; $tb-primary-color-light: #7986cb; + +$sidenav-anim-timing: 400ms cubic-bezier(0.25, 0.8, 0.25, 1);