UI: hide sidebar-close on mobile, widen user-menu trigger, tighten side-menu typography

Gate the sidebar-close toolbar button behind sidenavDesktop so it doesn't render on the overlay sidenav. User-menu trigger button now fills the rail width via ViewEncapsulation.None + a tb-user-menu-panel that matches the trigger width. Toggled section labels bump to weight 500, hover background drop, and inactive labels lean on --mat-button-text-label-text-weight. Add sidebar-open SVG to the icon registry for the collapsed-sidenav trigger.
4 months ago · a3f4f5b105
9 changed files with 69 additions and 39 deletions
--- a/ui-ngx/src/app/modules/home/home.component.html
+++ b/ui-ngx/src/app/modules/home/home.component.html
@ -25,7 +25,9 @@
      <mat-toolbar class="tb-nav-header-toolbar">
        <div class="flex flex-1 flex-row justify-between">
          <tb-logo [src]="logo" class="tb-logo-title"></tb-logo>
-          <button mat-icon-button class="tb-mat-32"><tb-icon class="tb-mat-20">sidebar-close</tb-icon></button>
+          @if (sidenavDesktop) {
+            <button mat-icon-button class="tb-mat-32"><tb-icon class="tb-mat-20">sidebar-close</tb-icon></button>
+          }
        </div>
      </mat-toolbar>
    </header>
--- a/ui-ngx/src/app/modules/home/home.component.ts
+++ b/ui-ngx/src/app/modules/home/home.component.ts
@ -52,6 +52,7 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni

  sidenavMode: 'over' | 'push' | 'side' = 'side';
  sidenavOpened = true;
+  sidenavDesktop = true;

  logo = 'assets/logo_title_black.svg';

@ -83,6 +84,7 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
    const isGtSm = this.breakpointObserver.isMatched(MediaBreakpoints['gt-sm']);
    this.sidenavMode = isGtSm ? 'side' : 'over';
    this.sidenavOpened = isGtSm;
+    this.sidenavDesktop = isGtSm;

    this.breakpointObserver
      .observe(MediaBreakpoints['gt-sm'])
@ -91,9 +93,11 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
          if (state.matches) {
            this.sidenavMode = 'side';
            this.sidenavOpened = true;
+            this.sidenavDesktop = true;
          } else {
            this.sidenavMode = 'over';
            this.sidenavOpened = false;
+            this.sidenavDesktop = false;
          }
        }
      );
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
@ -20,11 +20,13 @@
  .tb-button-toggle {
    &.tb-toggled {
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+      --mat-button-text-label-text-weight: 500;
    }
    .tb-toggle-icon {
      display: inline-block;
-      width: 15px;
-      min-width: 15px;
+      width: 12px;
+      min-width: 12px;
+      font-size: 12px;
      margin: auto 0 auto auto;
      background-size: 100% auto;
      transition: transform .3s ease-in-out;
@ -61,10 +63,13 @@
    transition-property: height;

    a.mat-mdc-button {
-      padding: 0 16px 0 32px;
-      font-weight: 500;
+      //padding: 0 16px 0 32px;
+      .mat-icon {
+        visibility: hidden;
+      }
+    /*  font-weight: 500;
      text-transform: none !important;
-      text-rendering: optimizeLegibility;
+      text-rendering: optimizeLegibility;*/
    }
  }
 }
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss
+++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss
@ -23,6 +23,7 @@
    padding: 12px 0;
    margin: 0;
    list-style: none;
+    --mat-button-text-label-text-weight: 400;
  }

  .tb-side-menu ul {
@ -43,13 +44,12 @@
    --mat-button-text-label-text-color: rgba(0, 0, 0, .76);
    &:hover {
      border-bottom: none;
-      background-color: rgba(255,255,255,0.08);
    }
    &:focus {
      border-bottom: none;
    }
    &.tb-active {
-      background-color: rgba(255, 255, 255, .15);
+      background-color: rgba(0, 0, 0, .08);
    }
    .mat-icon {
      margin-right: 8px;
@ -63,7 +63,6 @@
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-flex;
-      font-weight: 400;
      & > span {
        overflow: hidden;
        text-overflow: ellipsis;
--- a/ui-ngx/src/app/shared/components/user-menu.component.html
+++ b/ui-ngx/src/app/shared/components/user-menu.component.html
@ -15,7 +15,8 @@
    limitations under the License.

 -->
-<button mat-button class="tb-user-menu" [matMenuTriggerFor]="userMenu">
+<button mat-button class="tb-user-menu" [matMenuTriggerFor]="userMenu" #menuButton
+        (click)="$event.stopPropagation();">
  <tb-icon class="material-icons tb-mini-avatar">mdi:account-circle-outline</tb-icon>
  <div class="flex flex-col items-stretch justify-center">
    @if (userDisplayName$ | async; as userDisplayName) {
@ -26,9 +27,9 @@
    }
  </div>
 </button>
-<mat-menu #userMenu="matMenu" xPosition="before" yPosition="above">
+<mat-menu #userMenu="matMenu" class="tb-user-menu-panel" xPosition="after">
  @if (authority$ | async; as authority) {
-    <div class="tb-user-menu-items">
+    <div class="tb-user-menu-items" [style.width.px]="menuButton._elementRef.nativeElement.offsetWidth">
      <button mat-menu-item (click)="openAccount()">
        <tb-icon matMenuItemIcon>mdi:account-circle-outline</tb-icon>
        <span translate>account.account</span>
--- a/ui-ngx/src/app/shared/components/user-menu.component.scss
+++ b/ui-ngx/src/app/shared/components/user-menu.component.scss
@ -13,9 +13,12 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-:host {
-  button.tb-user-menu {
-    width: 250px;
+
+tb-user-menu {
+  width: 100%;
+
+  button.mat-mdc-button:not(.mat-mdc-icon-button).tb-user-menu {
+    width: 100%;
    height: 100%;
    padding: 16px;
    display: flex;
@ -44,32 +47,34 @@
      letter-spacing: 0.25px;
    }

-  }
-
-  .mat-icon.tb-mini-avatar {
-    width: 32px;
-    height: 32px;
-    font-size: 32px;
-    margin: 0;
+    .mat-icon.tb-mini-avatar {
+      width: 32px;
+      height: 32px;
+      font-size: 32px;
+      margin: 0;
+    }
  }
 }

-.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);
+.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);
+      }
    }
  }
 }
--- a/ui-ngx/src/app/shared/components/user-menu.component.ts
+++ b/ui-ngx/src/app/shared/components/user-menu.component.ts
@ -14,7 +14,15 @@
 /// limitations under the License.
 ///

-import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
 import { User } from '@shared/models/user.model';
 import { Authority } from '@shared/models/authority.enum';
 import { select, Store } from '@ngrx/store';
@ -30,6 +38,7 @@ import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
    templateUrl: './user-menu.component.html',
    styleUrls: ['./user-menu.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
    standalone: false
 })
 export class UserMenuComponent implements OnInit, OnDestroy {
--- a/ui-ngx/src/app/shared/models/icon.models.ts
+++ b/ui-ngx/src/app/shared/models/icon.models.ts
@ -83,6 +83,7 @@ export const svgIconsUrl: { [key: string]: string } = {
  linux: '/assets/linux.svg',
  docker: '/assets/docker.svg',
  'sidebar-close': '/assets/icons/sidebar-close.svg',
+  'sidebar-open': '/assets/icons/sidebar-open.svg'
 };

 const svgIconNamespaces: string[] = ['mdi'];
--- a/ui-ngx/src/assets/icons/sidebar-open.svg
+++ b/ui-ngx/src/assets/icons/sidebar-open.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path d="M3.75 2.25C2.92157 2.25 2.25 2.92157 2.25 3.75V14.25C2.25 15.0267 2.84028 15.6654 3.59668 15.7422L3.75 15.75H14.25L14.4033 15.7422C15.1093 15.6705 15.6705 15.1093 15.7422 14.4033L15.75 14.25V3.75C15.75 2.92157 15.0784 2.25 14.25 2.25H3.75ZM14.25 14.25H7.5V3.75H14.25V14.25ZM6 14.25H3.75V3.75H6V14.25Z"/>
+  <path d="M8.97729 6.77197L11.2046 8.99927L8.97729 11.2266L9.77271 12.022L12.7954 8.99927L9.77271 5.97656L8.97729 6.77197Z"/>
+</svg>