From e1a40b9586c089bb38764c2139e5247655abdcaa Mon Sep 17 00:00:00 2001
From: Giddh's Black Tiger <divyanshushrivastava123@gmail.com>
Date: Wed, 1 Apr 2026 12:28:47 +0530
Subject: [PATCH] refactor: migrate sidebar state from BehaviorSubject to
 signal

- Replace BehaviorSubject with signal for isSideNavOpen state management
- Update template to use signal syntax instead of async pipe
- Improve user profile section layout with better spacing and text overflow handling
- Add tooltip to user profile button showing full display name
- Update dark theme color variable from neutral-40 to neutral-80
- Add CSS rule for full-width button label support
- Remove unused BehaviorSubject import
---
 .../src/app/layout/layout.component.html      | 55 +++++++++++--------
 .../src/app/layout/layout.component.ts        |  6 +-
 .../src/assets/scss/theme/_default-theme.scss |  4 +-
 apps/36-blocks/src/styles.scss                |  8 +++
 4 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/apps/36-blocks/src/app/layout/layout.component.html b/apps/36-blocks/src/app/layout/layout.component.html
index 7bb78f3d..2f25f06c 100644
--- a/apps/36-blocks/src/app/layout/layout.component.html
+++ b/apps/36-blocks/src/app/layout/layout.component.html
@@ -1,26 +1,26 @@
-<div class="flex w-full h-full" [class.collapsed-sidebar]="!(isSideNavOpen | async)">
+<div class="flex w-full h-full" [class.collapsed-sidebar]="!isSideNavOpen()">
     <div
         class="flex flex-col transition-all duration-200 mat-drawer-content max-desktop:fixed max-desktop:z-[999] max-desktop:top-0 max-desktop:bottom-0 bg-color p-2"
-        [class.mat-drawer-toggle-btn-hover]="isSideNavOpen | async"
-        [class]="!(isSideNavOpen | async) ? 'overflow-hidden !w-[56px] p-1.5' : 'w-[246px]'"
+        [class.mat-drawer-toggle-btn-hover]="isSideNavOpen()"
+        [class]="!isSideNavOpen() ? 'overflow-hidden !w-[56px] p-1.5' : 'w-[246px]'"
     >
-        <div class="flex items-center py-2" [class]="!(isSideNavOpen | async) ? 'flex-col gap-2' : ''">
+        <div class="flex items-center py-2" [class]="!isSideNavOpen() ? 'flex-col gap-2' : ''">
             <div
                 class="flex items-center grow gap-2 mat-drawer-header-title px-4"
                 #clientsMenuTrigger="matMenuTrigger"
                 [matMenuTriggerFor]="clientsMenu"
             >
-                @if (!(isSideNavOpen | async)) {
+                @if (!isSideNavOpen()) {
                 <mat-icon class="mat-icon-22">apps</mat-icon>
                 }
                 <div
                     class="flex items-center gap-x-1 mat-drawer-header-subtitle cursor-pointer"
-                    [class.hidden]="!(isSideNavOpen | async)"
+                    [class.hidden]="!isSideNavOpen()"
                 >
                     <span class="font-16 font-semibold overflow-dotted" style="max-width: 145px">
                         {{ (clientSettings$ | async)?.client?.name }}
                     </span>
-                    @if (isSideNavOpen | async) {
+                    @if (isSideNavOpen()) {
                     <mat-icon>{{
                         clientsMenuTrigger?.menuOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
                     }}</mat-icon>
@@ -68,34 +68,45 @@
                 matButton="tonal"
                 class="mat-drawer-toggle-btn mat-icon-32 !p-0 !min-w-0"
                 (click)="toggleSideBarEvent()"
-                [matTooltip]="(isSideNavOpen | async) ? 'Collapse Menu' : 'Expand Menu'"
+                [matTooltip]="isSideNavOpen() ? 'Collapse Menu' : 'Expand Menu'"
                 matTooltipPosition="right"
                 type="button"
             >
                 <mat-icon class="!m-0">{{
-                    (isSideNavOpen | async) ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'
+                    isSideNavOpen() ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'
                 }}</mat-icon>
             </button>
         </div>
         <!-- Proxy Sidenav::START -->
         <proxy-main-left-side-nav
             class="mat-drawer-nav proxy-left-menu"
-            [isSideNavOpen]="!(isSideNavOpen | async)"
+            [isSideNavOpen]="!isSideNavOpen()"
         ></proxy-main-left-side-nav>
         <!-- Proxy Sidenav::END -->
         @if (logInData$ | async; as user) {
-        <div class="mat-drawer-footer mt-auto">
-            <button class="!rounded-lg" matButton [matMenuTriggerFor]="menu">
-                <div class="flex items-center">
-                    @if (user.photoURL) {
-                    <img [src]="user.photoURL" alt="No Image" class="w-7 h-7 rounded-full" loading="lazy" />
-                    } @else {
-                    <mat-icon aria-hidden="false" class="mr-6 text-grey material-icons-outlined">
-                        account_circle</mat-icon
-                    >
-                    }
-                    <div class="flex flex-col" style="width: 140px">
-                        <h6 [class.hidden]="!(isSideNavOpen | async)" class="username m-0">{{ user.displayName }}</h6>
+        <div class="mt-auto">
+            <button
+                class="!rounded-lg !p-0 w-full"
+                matButton
+                [matMenuTriggerFor]="menu"
+                [matTooltip]="user.displayName"
+                matTooltipPosition="after"
+            >
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                        @if (user.photoURL) {
+                        <img [src]="user.photoURL" alt="No Image" class="w-7 h-7 rounded-full" loading="lazy" />
+                        } @else {
+                        <mat-icon aria-hidden="false" class="mr-6 text-grey material-icons-outlined">
+                            account_circle
+                        </mat-icon>
+                        }
+                        <h6
+                            [class.hidden]="!isSideNavOpen()"
+                            class="username m-0 max-w-[162px] overflow-hidden whitespace-nowrap text-ellipsis"
+                        >
+                            {{ user.displayName }}
+                        </h6>
                     </div>
                     <mat-icon class="mx-1 material-icons-outlined">keyboard_arrow_up</mat-icon>
                 </div>
diff --git a/apps/36-blocks/src/app/layout/layout.component.ts b/apps/36-blocks/src/app/layout/layout.component.ts
index b798f6e9..e7c7b4fa 100644
--- a/apps/36-blocks/src/app/layout/layout.component.ts
+++ b/apps/36-blocks/src/app/layout/layout.component.ts
@@ -27,7 +27,7 @@ import { BaseComponent } from '@proxy/ui/base-component';
 import { Store, select } from '@ngrx/store';
 import { selectLogInData } from '../auth/ngrx/selector/login.selector';
 import { isEqual } from 'lodash-es';
-import { BehaviorSubject, Observable, distinctUntilChanged, filter, takeUntil, combineLatest } from 'rxjs';
+import { Observable, distinctUntilChanged, filter, takeUntil, combineLatest } from 'rxjs';
 import { ILogInFeatureStateWithRootState } from '../auth/ngrx/store/login.state';
 import * as logInActions from '../auth/ngrx/actions/login.action';
 import { rootActions } from '../ngrx/actions';
@@ -66,7 +66,7 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
     public clients$: Observable<IPaginatedResponse<IClient[]>>;
     public swtichClientSuccess$: Observable<boolean>;
 
-    public isSideNavOpen = new BehaviorSubject<boolean>(true);
+    public isSideNavOpen = signal<boolean>(true);
     public isDarkMode = signal<boolean>(false);
 
     public toggleMenuSideBar: boolean;
@@ -229,6 +229,6 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
     }
 
     public toggleSideBarEvent(): void {
-        this.isSideNavOpen.next(!this.isSideNavOpen.getValue());
+        this.isSideNavOpen.set(!this.isSideNavOpen());
     }
 }
diff --git a/apps/36-blocks/src/assets/scss/theme/_default-theme.scss b/apps/36-blocks/src/assets/scss/theme/_default-theme.scss
index 7b560bfe..a27aea54 100644
--- a/apps/36-blocks/src/assets/scss/theme/_default-theme.scss
+++ b/apps/36-blocks/src/assets/scss/theme/_default-theme.scss
@@ -21,7 +21,7 @@ html {
         @include mat.all-component-colors(theme.$dark-theme);
         @include mat.system-level-colors(theme.$dark-theme);
         --mat-sys-outline: var(--color-common-border);
-        --mat-sys-on-surface: var(--proxy-neutral-40);
+        --mat-sys-on-surface: var(--proxy-neutral-80);
     }
 }
 
@@ -30,7 +30,7 @@ body.dark-theme {
     @include mat.all-component-colors(theme.$dark-theme);
     @include mat.system-level-colors(theme.$dark-theme);
     --mat-sys-outline: var(--color-common-border);
-    --mat-sys-on-surface: var(--proxy-neutral-40);
+    --mat-sys-on-surface: var(--proxy-neutral-80);
 }
 
 /* Force light theme (overrides OS dark preference) */
diff --git a/apps/36-blocks/src/styles.scss b/apps/36-blocks/src/styles.scss
index 3158fe49..1d53fa33 100644
--- a/apps/36-blocks/src/styles.scss
+++ b/apps/36-blocks/src/styles.scss
@@ -58,3 +58,11 @@ pre[class*='language-'] {
     margin: 0 !important;
     border-radius: 0 !important;
 }
+
+button {
+    &.w-full {
+        .mdc-button__label {
+            width: 100%;
+        }
+    }
+}