Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 33 additions & 22 deletions apps/36-blocks/src/app/layout/layout.component.html
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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()"
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There appears to be a potential logic issue with the isSideNavOpen property passed to the proxy-main-left-side-nav component. The component receives [isSideNavOpen]="!isSideNavOpen()", which negates the value. This might be intentional, but it's worth confirming that the child component expects the inverse of the parent's state to function correctly.

></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>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The user profile button shows a fixed keyboard_arrow_up icon regardless of whether the menu is open or closed. Consider making this dynamic like the client menu icon:

Suggested change
<mat-icon class="mx-1 material-icons-outlined">keyboard_arrow_up</mat-icon>
<mat-icon class="mx-1 material-icons-outlined">{{ menu?.menuOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>

</div>
Expand Down
6 changes: 3 additions & 3 deletions apps/36-blocks/src/app/layout/layout.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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());
}
}
4 changes: 2 additions & 2 deletions apps/36-blocks/src/assets/scss/theme/_default-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand All @@ -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) */
Expand Down
8 changes: 8 additions & 0 deletions apps/36-blocks/src/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -58,3 +58,11 @@ pre[class*='language-'] {
margin: 0 !important;
border-radius: 0 !important;
}

button {
&.w-full {
.mdc-button__label {
width: 100%;
}
}
}
Loading