From da9158f7eddff145c6f51464288504ed49f536bf Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 1 Jul 2026 19:56:22 +0300
Subject: [PATCH] fix(user-menu): use distinct popover refs so both full and
 icon triggers close on Account/Logout

PROD-followup on the new-menu review: both #menuPopover template refs in
UserMenuComponent's template resolved to only one popover instance, so
menuPopover?.hide() inside the shared userMenuTpl closed only one of the
two mutually-exclusive trigger buttons (they swap via lt-lg media query).
Rename to #menuPopoverFull / #menuPopoverIcon and call .hide() on both
from the shared Account/Logout menu items so whichever button is visible
for the current breakpoint always closes cleanly.

Also drop legacy commented-out selectors in menu-toggle.component.scss
and tighten HomeService.toggleSideBar to EventEmitter<void>.
---
 ui-ngx/src/app/core/services/home.service.ts              | 2 +-
 .../src/app/modules/home/menu/menu-toggle.component.scss  | 4 ----
 ui-ngx/src/app/shared/components/user-menu.component.html | 8 ++++----
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/core/services/home.service.ts b/ui-ngx/src/app/core/services/home.service.ts
index a4bf0f1de2..878001844d 100644
--- a/ui-ngx/src/app/core/services/home.service.ts
+++ b/ui-ngx/src/app/core/services/home.service.ts
@@ -38,7 +38,7 @@ export class HomeService {
     return this.hideLoadingBarSubject.asObservable().pipe(distinctUntilChanged(), shareReplay(1));
   }
 
-  toggleSideBar = new EventEmitter();
+  toggleSideBar = new EventEmitter<void>();
 
   constructor(private activeComponentService: ActiveComponentService) {
     this.activeComponentService.onActiveComponentChanged().subscribe(activeComponent => {
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 7c942aefbc..2d05fb283f 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
@@ -62,13 +62,9 @@
     transition-property: height;
 
     a.mat-mdc-button {
-      //padding: 0 16px 0 32px;
       .mat-icon {
         visibility: hidden;
       }
-    /*  font-weight: 500;
-      text-transform: none !important;
-      text-rendering: optimizeLegibility;*/
     }
   }
 }
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 22fc8d3f84..c67be678eb 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,7 @@
     limitations under the License.
 
 -->
-<button #menuButton #menuPopover="tbPopover" mat-button class="tb-user-menu" [class.tb-collapsed]="collapsed"
+<button #menuButton #menuPopoverFull="tbPopover" mat-button class="tb-user-menu" [class.tb-collapsed]="collapsed"
         (click)="$event.stopPropagation();"
         tb-popover
         tbPopoverTrigger="click"
@@ -33,7 +33,7 @@
     }
   </div>
 </button>
-<button #menuPopover="tbPopover" mat-icon-button class="tb-user-menu-icon"
+<button #menuPopoverIcon="tbPopover" mat-icon-button class="tb-user-menu-icon"
         (click)="$event.stopPropagation();"
         tb-popover
         tbPopoverTrigger="click"
@@ -48,11 +48,11 @@
       <div class="tb-user-email">
         {{ userEmail$ | async }}
       </div>
-      <button mat-button (click)="menuPopover?.hide(); openAccount()">
+      <button mat-button (click)="menuPopoverFull?.hide(); menuPopoverIcon?.hide(); openAccount()">
         <tb-icon matButtonIcon>mdi:account-circle-outline</tb-icon>
         <span translate>account.account</span>
       </button>
-      <button mat-button class="tb-logout" (click)="menuPopover?.hide(); logout()">
+      <button mat-button class="tb-logout" (click)="menuPopoverFull?.hide(); menuPopoverIcon?.hide(); logout()">
         <tb-icon matButtonIcon>logout</tb-icon>
         <span translate>home.logout</span>
       </button>