From a3f4f5b105680d6eb79d46951cb4691bda2c5f29 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 18 Jun 2026 16:12:45 +0300
Subject: [PATCH] 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.
---
 .../src/app/modules/home/home.component.html  |  4 +-
 ui-ngx/src/app/modules/home/home.component.ts |  4 ++
 .../home/menu/menu-toggle.component.scss      | 15 +++--
 .../home/menu/side-menu.component.scss        |  5 +-
 .../components/user-menu.component.html       |  7 ++-
 .../components/user-menu.component.scss       | 57 ++++++++++---------
 .../shared/components/user-menu.component.ts  | 11 +++-
 ui-ngx/src/app/shared/models/icon.models.ts   |  1 +
 ui-ngx/src/assets/icons/sidebar-open.svg      |  4 ++
 9 files changed, 69 insertions(+), 39 deletions(-)
 create mode 100644 ui-ngx/src/assets/icons/sidebar-open.svg

diff --git a/ui-ngx/src/app/modules/home/home.component.html b/ui-ngx/src/app/modules/home/home.component.html
index e11b4c624b..d99a075107 100644
--- 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>
diff --git a/ui-ngx/src/app/modules/home/home.component.ts b/ui-ngx/src/app/modules/home/home.component.ts
index 924c892f9c..f7a423e135 100644
--- 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;
           }
         }
       );
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
index 84aac93c5a..c327fcb6fb 100644
--- 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;*/
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.scss b/ui-ngx/src/app/modules/home/menu/side-menu.component.scss
index d58bc0f649..1578e1c7c8 100644
--- 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;
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 c9207da9af..102a3f6120 100644
--- 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>
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 7148f3d529..4f44dcb028 100644
--- 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);
+      }
     }
   }
 }
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 1fcde5a1b6..201979bfae 100644
--- 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 {
diff --git a/ui-ngx/src/app/shared/models/icon.models.ts b/ui-ngx/src/app/shared/models/icon.models.ts
index 9cec2136c5..e08abb75c5 100644
--- 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'];
diff --git a/ui-ngx/src/assets/icons/sidebar-open.svg b/ui-ngx/src/assets/icons/sidebar-open.svg
new file mode 100644
index 0000000000..562cd4a3b7
--- /dev/null
+++ 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>