From fd2cf1b53755f1f1aaf88ae7980307ba8ca52089 Mon Sep 17 00:00:00 2001 From: Alex Piatakov Date: Tue, 16 Jun 2026 01:59:58 +0100 Subject: [PATCH 1/5] feat: redesign navigation menu and layouts Refresh the main navigation with a token-driven brand-tinted style and add a user-selectable vertical (sidebar) or horizontal (top bar) layout. - Drive the sidebar look from --sidebar-* tokens in variables.scss (light and dark); the active accent follows the brand colour. - Replace the dual icon system with PrimeIcons and add group section labels. - Auto-expand the group of the current route; show child items as a flyout when the rail is collapsed; move the collapse toggle into the header. - Add MenuLayoutService and a horizontal top bar built on PrimeNG menubar, with a layout switch on the profile page; offset is driven by --header-width. - Make fixed bottom action bars track the live rail width so they no longer overlap content when the menu is collapsed or horizontal. Signed-off-by: Alex Piatakov --- frontend/src/app/app.component.ts | 13 +- frontend/src/app/app.module.ts | 4 +- .../policies/policies.component.scss | 2 +- .../global-events-reader-block.component.scss | 2 +- .../global-events-writer-block.component.scss | 2 +- .../request-document-block.component.scss | 4 +- .../roles-block/roles-block.component.scss | 2 +- .../policy-viewer.component.scss | 2 +- .../progress-tracker.component.scss | 2 +- .../project-data-export.component.scss | 2 +- .../src/app/services/menu-layout.service.ts | 69 ++ .../settings-view.component.scss | 3 +- .../views/branding/branding.component.scss | 7 +- .../src/app/views/new-header/menu.model.ts | 28 +- .../new-header/new-header.component.html | 280 ++++---- .../new-header/new-header.component.scss | 635 +++++++++++------- .../views/new-header/new-header.component.ts | 116 +++- .../root-profile/root-profile.component.html | 15 + .../root-profile/root-profile.component.ts | 14 + .../app/views/schemas/schemas.component.scss | 2 +- .../token-config/token-config.component.scss | 2 +- frontend/src/variables.scss | 35 + 22 files changed, 817 insertions(+), 424 deletions(-) create mode 100644 frontend/src/app/services/menu-layout.service.ts diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 2017dd898a..dba60dda81 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -57,9 +57,20 @@ export class AppComponent implements OnInit { document.documentElement.style.setProperty('--vh', `${vh}px`); } - resizeMenu(type: 'COLLAPSE' | 'EXPAND' | 'NO_MARGIN') { + resizeMenu(type: 'COLLAPSE' | 'EXPAND' | 'NO_MARGIN' | 'HORIZONTAL') { const progressFooter = document.getElementById('block-progress-footer'); switch (type) { + case 'HORIZONTAL': { + // Rail width is zeroed by the `layout-horizontal` root class, so the page + // only needs its left gutter removed; the top offset comes from --header-height. + document.body.style.setProperty('--header-width', '0px'); + document.getElementById('main-content')!.style.left = '0'; + document.getElementById('main-content')!.removeAttribute('main-collapse-menu'); + if (progressFooter) { + progressFooter.style.paddingLeft = '48px'; + } + break; + } case 'COLLAPSE': { document.body.style.setProperty('--header-width', 'var(--header-width-collapse)'); document.getElementById('main-content')!.style.left = 'var(--header-width-collapse)'; diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 648edeb696..f9af9bf560 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -149,6 +149,7 @@ import { PolicyRepositoryService } from './services/policy-repository.service'; import { RelayerAccountsService } from './services/relayer-accounts.service'; import { RelayerAccountsComponent } from './views/relayer-accounts/relayer-accounts.component'; import { TreeTableModule } from 'primeng/treetable'; +import { MenubarModule } from 'primeng/menubar'; import { CredentialsPanelComponent } from './components/credentials/credentials-panel/credentials-panel.component'; const GuardianPreset = definePreset(Aura, { @@ -290,7 +291,8 @@ const GuardianPreset = definePreset(Aura, { CardModule, ToggleSwitchModule, AngularSvgIconModule.forRoot(), - TreeTableModule + TreeTableModule, + MenubarModule ], providers: [ WebSocketService, diff --git a/frontend/src/app/modules/policy-engine/policies/policies.component.scss b/frontend/src/app/modules/policy-engine/policies/policies.component.scss index 2d31db4b6b..1c6f9a23e4 100644 --- a/frontend/src/app/modules/policy-engine/policies/policies.component.scss +++ b/frontend/src/app/modules/policy-engine/policies/policies.component.scss @@ -1154,7 +1154,7 @@ .options-footer { padding: 12px 48px; - padding-left: calc(var(--header-width-expand) + 48px); + padding-left: calc(var(--header-width, var(--header-width-expand)) + 48px); display: flex; justify-content: space-between; position: fixed; diff --git a/frontend/src/app/modules/policy-engine/policy-viewer/blocks/global-events-reader-block/global-events-reader-block.component.scss b/frontend/src/app/modules/policy-engine/policy-viewer/blocks/global-events-reader-block/global-events-reader-block.component.scss index 1769f57f08..7e30b3c5ef 100644 --- a/frontend/src/app/modules/policy-engine/policy-viewer/blocks/global-events-reader-block/global-events-reader-block.component.scss +++ b/frontend/src/app/modules/policy-engine/policy-viewer/blocks/global-events-reader-block/global-events-reader-block.component.scss @@ -316,7 +316,7 @@ width: 100%; border-top: 1px solid var(--color-grey-3, #E1E7EF); background: var(--guardian-background, #FFF); - padding-left: calc(var(--header-width-expand) + 48px); + padding-left: calc(var(--header-width, var(--header-width-expand)) + 48px); transition: padding-left 0.125s ease-in-out; z-index: 999; } diff --git a/frontend/src/app/modules/policy-engine/policy-viewer/blocks/global-events-writer-block/global-events-writer-block.component.scss b/frontend/src/app/modules/policy-engine/policy-viewer/blocks/global-events-writer-block/global-events-writer-block.component.scss index 058b6f8ef3..d0530e9548 100644 --- a/frontend/src/app/modules/policy-engine/policy-viewer/blocks/global-events-writer-block/global-events-writer-block.component.scss +++ b/frontend/src/app/modules/policy-engine/policy-viewer/blocks/global-events-writer-block/global-events-writer-block.component.scss @@ -241,7 +241,7 @@ width: 100%; border-top: 1px solid var(--color-grey-3, #E1E7EF); background: var(--guardian-background, #FFF); - padding-left: calc(var(--header-width-expand) + 48px); + padding-left: calc(var(--header-width, var(--header-width-expand)) + 48px); transition: padding-left 0.125s ease-in-out; z-index: 999; } diff --git a/frontend/src/app/modules/policy-engine/policy-viewer/blocks/request-document-block/request-document-block.component.scss b/frontend/src/app/modules/policy-engine/policy-viewer/blocks/request-document-block/request-document-block.component.scss index 4a3f1259b0..98c1a4c47b 100644 --- a/frontend/src/app/modules/policy-engine/policy-viewer/blocks/request-document-block/request-document-block.component.scss +++ b/frontend/src/app/modules/policy-engine/policy-viewer/blocks/request-document-block/request-document-block.component.scss @@ -179,7 +179,7 @@ width: 100%; border-top: 1px solid var(--color-grey-3, #e1e7ef); background: var(--guardian-background, #fff); - padding-left: calc(var(--header-width-expand) + 48px); + padding-left: calc(var(--header-width, var(--header-width-expand)) + 48px); transition: padding-left 0.125s ease-in-out; margin-top: 20px; @@ -548,7 +548,7 @@ width: 100%; border-top: 1px solid var(--color-grey-3, #e1e7ef); background: var(--guardian-background, #fff); - padding-left: calc(var(--header-width-expand) + 48px); + padding-left: calc(var(--header-width, var(--header-width-expand)) + 48px); transition: padding-left 0.125s ease-in-out; margin-top: 20px; left: 50%; diff --git a/frontend/src/app/modules/policy-engine/policy-viewer/blocks/roles-block/roles-block.component.scss b/frontend/src/app/modules/policy-engine/policy-viewer/blocks/roles-block/roles-block.component.scss index acf269bbda..073dd6f946 100644 --- a/frontend/src/app/modules/policy-engine/policy-viewer/blocks/roles-block/roles-block.component.scss +++ b/frontend/src/app/modules/policy-engine/policy-viewer/blocks/roles-block/roles-block.component.scss @@ -131,7 +131,7 @@ form { width: 100%; border-top: 1px solid var(--color-grey-3, #E1E7EF); background: var(--guardian-background, #FFF); - padding-left: calc(var(--header-width-expand) + 48px); + padding-left: calc(var(--header-width, var(--header-width-expand)) + 48px); transition: padding-left 0.125s ease-in-out; z-index: 999; } diff --git a/frontend/src/app/modules/policy-engine/policy-viewer/policy-viewer/policy-viewer.component.scss b/frontend/src/app/modules/policy-engine/policy-viewer/policy-viewer/policy-viewer.component.scss index 464e4b1632..db376de266 100644 --- a/frontend/src/app/modules/policy-engine/policy-viewer/policy-viewer/policy-viewer.component.scss +++ b/frontend/src/app/modules/policy-engine/policy-viewer/policy-viewer/policy-viewer.component.scss @@ -878,7 +878,7 @@ a.go-back-link svg { .progress-footer { padding: 12px 48px; - padding-left: calc(var(--header-width-expand) + 48px); + padding-left: calc(var(--header-width, var(--header-width-expand)) + 48px); display: flex; justify-content: space-between; position: fixed; diff --git a/frontend/src/app/modules/policy-engine/policy-viewer/progress-tracker/progress-tracker.component.scss b/frontend/src/app/modules/policy-engine/policy-viewer/progress-tracker/progress-tracker.component.scss index 1064e3f2ca..3277e3a46e 100644 --- a/frontend/src/app/modules/policy-engine/policy-viewer/progress-tracker/progress-tracker.component.scss +++ b/frontend/src/app/modules/policy-engine/policy-viewer/progress-tracker/progress-tracker.component.scss @@ -15,7 +15,7 @@ .progress-footer { padding: 12px 48px; - padding-left: calc(var(--header-width-expand) + 48px); + padding-left: calc(var(--header-width, var(--header-width-expand)) + 48px); display: flex; justify-content: space-between; position: fixed; diff --git a/frontend/src/app/modules/policy-engine/project-data-export/project-data-export.component.scss b/frontend/src/app/modules/policy-engine/project-data-export/project-data-export.component.scss index 1ba74b3af8..e0a40aacfe 100644 --- a/frontend/src/app/modules/policy-engine/project-data-export/project-data-export.component.scss +++ b/frontend/src/app/modules/policy-engine/project-data-export/project-data-export.component.scss @@ -462,7 +462,7 @@ a { .progress-footer { padding: 12px 48px; - padding-left: calc(var(--header-width-expand) + 48px); + padding-left: calc(var(--header-width, var(--header-width-expand)) + 48px); display: flex; justify-content: space-between; position: fixed; diff --git a/frontend/src/app/services/menu-layout.service.ts b/frontend/src/app/services/menu-layout.service.ts new file mode 100644 index 0000000000..f8bfd30bfa --- /dev/null +++ b/frontend/src/app/services/menu-layout.service.ts @@ -0,0 +1,69 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject, Observable } from 'rxjs'; + +export type MenuLayout = 'vertical' | 'horizontal'; + +export interface MenuLayoutOption { + label: string; + value: MenuLayout; + icon: string; +} + +const MENU_LAYOUT_STORAGE_KEY = 'MAIN_HEADER_LAYOUT'; +const HORIZONTAL_CLASS = 'layout-horizontal'; + +@Injectable({ + providedIn: 'root' +}) +export class MenuLayoutService { + public readonly layouts: MenuLayoutOption[] = [ + { label: 'Vertical', value: 'vertical', icon: 'pi-bars' }, + { label: 'Horizontal', value: 'horizontal', icon: 'pi-window-maximize' } + ]; + + private readonly layout$ = new BehaviorSubject(this.readStoredLayout()); + + constructor() { + this.applyLayoutClass(this.layout$.value); + } + + public get layout(): MenuLayout { + return this.layout$.value; + } + + public get changes(): Observable { + return this.layout$.asObservable(); + } + + public setLayout(layout: MenuLayout): void { + const resolved = this.findLayout(layout).value; + try { + localStorage.setItem(MENU_LAYOUT_STORAGE_KEY, resolved); + } catch (error) { + console.error(error); + } + this.applyLayoutClass(resolved); + this.layout$.next(resolved); + } + + public toggle(): void { + this.setLayout(this.layout$.value === 'vertical' ? 'horizontal' : 'vertical'); + } + + private readStoredLayout(): MenuLayout { + try { + return this.findLayout(localStorage.getItem(MENU_LAYOUT_STORAGE_KEY)).value; + } catch (error) { + console.error(error); + return this.layouts[0].value; + } + } + + private applyLayoutClass(layout: MenuLayout): void { + document.documentElement.classList.toggle(HORIZONTAL_CLASS, layout === 'horizontal'); + } + + private findLayout(layout: string | null): MenuLayoutOption { + return this.layouts.find((item) => item.value === layout) || this.layouts[0]; + } +} diff --git a/frontend/src/app/views/admin/settings-view/settings-view.component.scss b/frontend/src/app/views/admin/settings-view/settings-view.component.scss index d44d529d0d..7e855cbac8 100644 --- a/frontend/src/app/views/admin/settings-view/settings-view.component.scss +++ b/frontend/src/app/views/admin/settings-view/settings-view.component.scss @@ -42,13 +42,14 @@ .actions-container { position: fixed; - left: 270px; + left: var(--header-width, var(--header-width-expand)); right: 0; bottom: 0; height: 64px; display: flex; align-items: center; justify-content: flex-end; + transition: left 0.125s ease-in-out; background-color: var(--color-grey-white); border-top: 1px solid var(--color-grey-3, #E1E7EF); padding: 0 48px; diff --git a/frontend/src/app/views/branding/branding.component.scss b/frontend/src/app/views/branding/branding.component.scss index 5892a6fea4..d5647ca068 100644 --- a/frontend/src/app/views/branding/branding.component.scss +++ b/frontend/src/app/views/branding/branding.component.scss @@ -1,3 +1,7 @@ +.guardian-page { + padding-bottom: 88px; +} + .not-exist { position: absolute; left: 48px; @@ -55,13 +59,14 @@ .actions-container { position: fixed; - left: 270px; + left: var(--header-width, var(--header-width-expand)); right: 0; bottom: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; + transition: left 0.125s ease-in-out; background-color: var(--color-grey-white); border-top: 1px solid var(--color-grey-3, #E1E7EF); padding: 0 48px; diff --git a/frontend/src/app/views/new-header/menu.model.ts b/frontend/src/app/views/new-header/menu.model.ts index 556602aa15..dd180a770a 100644 --- a/frontend/src/app/views/new-header/menu.model.ts +++ b/frontend/src/app/views/new-header/menu.model.ts @@ -3,8 +3,10 @@ import { UserPermissions, UserRole } from '@guardian/interfaces'; export interface NavbarMenuItem { title: string; childItems?: NavbarMenuItem[]; - iconUrl?: string; - svgIcon?: string; + /** PrimeIcons class for the item, e.g. 'pi-wallet'. Inherits currentColor. */ + icon?: string; + /** Optional uppercase group label rendered above this item (vertical layout). */ + section?: string; routerLink?: string; active?: boolean; allowedUserRoles?: UserRole[]; @@ -14,7 +16,8 @@ const NAVBAR_MENU_STANDARD_REGISTRY: NavbarMenuItem[] = [ { title: 'Policies', allowedUserRoles: [UserRole.STANDARD_REGISTRY], - iconUrl: 'table', + icon: 'pi-objects-column', + section: 'Workspace', active: false, childItems: [ { @@ -53,7 +56,7 @@ const NAVBAR_MENU_STANDARD_REGISTRY: NavbarMenuItem[] = [ }, { title: 'Tokens', - iconUrl: 'twoRings', + icon: 'pi-bitcoin', allowedUserRoles: [UserRole.STANDARD_REGISTRY], active: false, childItems: [ @@ -69,7 +72,7 @@ const NAVBAR_MENU_STANDARD_REGISTRY: NavbarMenuItem[] = [ }, { title: 'Relayer Accounts', - svgIcon: 'wallet', + icon: 'pi-wallet', allowedUserRoles: [UserRole.STANDARD_REGISTRY], active: false, routerLink: '/relayer-accounts' @@ -78,7 +81,8 @@ const NAVBAR_MENU_STANDARD_REGISTRY: NavbarMenuItem[] = [ title: 'Administration', allowedUserRoles: [UserRole.STANDARD_REGISTRY], active: false, - iconUrl: 'stars', + icon: 'pi-sliders-h', + section: 'Administration', childItems: [ { title: 'Manage Roles', @@ -117,12 +121,12 @@ const NAVBAR_MENU_AUDITOR: NavbarMenuItem[] = [ title: 'Audit', allowedUserRoles: [UserRole.AUDITOR], active: false, - iconUrl: 'guard', + icon: 'pi-shield', routerLink: '/audit' }, { title: 'Trust Chain', - iconUrl: 'twoRings', + icon: 'pi-sitemap', allowedUserRoles: [UserRole.AUDITOR], active: false, routerLink: '/trust-chain' @@ -228,7 +232,8 @@ function customMenu(user: UserPermissions): NavbarMenuItem[] { menu.push({ title: 'Policies', allowedUserRoles: [UserRole.STANDARD_REGISTRY], - iconUrl: 'table', + icon: 'pi-objects-column', + section: 'Workspace', active: false, childItems }); @@ -280,7 +285,7 @@ function customMenu(user: UserPermissions): NavbarMenuItem[] { } menu.push({ title: 'Tokens', - iconUrl: 'twoRings', + icon: 'pi-bitcoin', allowedUserRoles: [UserRole.STANDARD_REGISTRY], active: false, childItems @@ -346,7 +351,8 @@ function customMenu(user: UserPermissions): NavbarMenuItem[] { title: 'Administration', allowedUserRoles: [UserRole.STANDARD_REGISTRY], active: false, - iconUrl: 'stars', + icon: 'pi-sliders-h', + section: 'Administration', childItems }); } diff --git a/frontend/src/app/views/new-header/new-header.component.html b/frontend/src/app/views/new-header/new-header.component.html index f986c2d080..f359ca7571 100644 --- a/frontend/src/app/views/new-header/new-header.component.html +++ b/frontend/src/app/views/new-header/new-header.component.html @@ -1,196 +1,190 @@ @if (isLogin) { -
- - + } @else { +
+ +
+ } } - -
- - - -
- - -
- - +
+
+ + +
+
+ +
- - - @for (barItem of barItems; track barItem) { -
+ @for (barItem of menuItems; track barItem) { + @if (barItem.section && !menuCollapsed) { +
{{ barItem.section }}
+ } +
- @if (barItem.iconUrl) { - - } - @if (barItem.svgIcon) { - - + @if (barItem.icon) { + }
- - {{ barItem.title }} - + {{ barItem.title }} @if (barItem.childItems) { - + }
+ @if (!menuCollapsed && barItem.active && barItem.childItems) {
- -
- } -
- } - - - - -
-
-
- -
- @if (menuCollapsed) { - - } -
-
- Notifications - @if (!menuCollapsed) { - - } -
-
-
- - @if (policyRequests && policyRequests > 0) { -
- -
-
- @if (newPolicyRequests > 0) { + @for (child of barItem.childItems; track child) {
- - {{ newPolicyRequests }} - + {{ child.title }}
}
-
-
- Incoming Requests -
- @if (newPolicyRequests > 0) { + } + + @if (menuCollapsed && barItem.childItems) { +
+
{{ barItem.title }}
+ @for (child of barItem.childItems; track child) {
- - {{ newPolicyRequests }} - + {{ child.title }}
}
-
+ }
} +
+ + + +
+ +
+ - @if (user.ANALYTIC_DOCUMENT_READ) { - + +
+ + @if (menuCollapsed && layout === 'vertical') { +
+ +
} +
+ Notifications + @if (!(menuCollapsed && layout === 'vertical')) { + + } +
+
+ @if (policyRequests && policyRequests > 0) { +
+ +
+ Incoming Requests + @if (newPolicyRequests > 0) { +
{{ newPolicyRequests }}
+ } +
+
+ } + + @if (user.ANALYTIC_DOCUMENT_READ) { + + } + + @if (layout === 'horizontal') {
- - - Accounts @if (balance) { - {{ balance }} - } - @if (!balance) { -
-
-
- } + + {{ balance || '…' }}
+ } -
-
- -
+
+
+
{{ getInitials(username) }}
+ @if (!(menuCollapsed && layout === 'vertical')) { +
{{ username }} -
- -
+ @if (layout === 'vertical' && balance) { + {{ balance }} + }
-
+ + }
diff --git a/frontend/src/app/views/new-header/new-header.component.scss b/frontend/src/app/views/new-header/new-header.component.scss index aa0dd952e2..9c612bf0d5 100644 --- a/frontend/src/app/views/new-header/new-header.component.scss +++ b/frontend/src/app/views/new-header/new-header.component.scss @@ -1,11 +1,12 @@ +/* ── Vertical sidebar rail ─────────────────────────────────────────────── */ #navbar { display: flex; flex-direction: column; justify-content: flex-start; width: var(--header-width-expand); height: 100%; - background: var(--linear-gradient); - box-shadow: 8px 4px 24px 0 var(--header-color-shadow); + background: var(--sidebar-bg); + border-right: 1px solid var(--sidebar-border); position: fixed; left: 0; top: 0; @@ -15,192 +16,152 @@ z-index: 100; } -.collapse { +#navbar.collapse { width: var(--header-width-collapse) !important; - transition: width 0.125s ease-in-out; + overflow: visible; + + #menuBar { + overflow: visible; + } } -#remoteButton { +/* ── Brand / logo header + collapse toggle ─────────────────────────────── */ +#logotype { + height: 64px; + min-height: 64px; display: flex; align-items: center; - justify-content: center; - - background-color: #fff; - border-radius: 50%; - fill: var(--guardian-on-primary-color, #fff); - filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.08)); - position: fixed; - - transition: transform 0.125s ease-in-out, - left 0.125s ease-in-out, - width 0.125s ease-in-out, - height 0.125s ease-in-out, - left 0.125s ease-in-out, - top 0.125s ease-in-out; - cursor: pointer; - z-index: 1000; + justify-content: space-between; + column-gap: 8px; + padding: 0 16px 0 20px; + margin-bottom: 8px; - // width: 40px; - // height: 40px; - // top: 56px; - // left: calc(var(--header-width-expand) - 20px); + .logotype-brand { + display: flex; + align-items: center; + column-gap: 12px; + cursor: pointer; + overflow: hidden; - left: calc(var(--header-width-expand) - 1px); - top: 80px; - width: 32px; - height: 32px; - transform: translate(-50%, -50%); + #company-logo { + width: 30px; + height: 30px; + min-width: 30px; + border-radius: 8px; + object-fit: contain; + } - &:hover { - width: 46px; - height: 46px; - // top: 52px; - // left: calc(var(--header-width-expand) - 23px); + span { + color: var(--sidebar-logo-color); + font-family: var(--font-family-inter, Inter, sans-serif); + font-size: 16px; + font-weight: 500; + letter-spacing: 0.3px; + white-space: nowrap; + transition: opacity 0.125s ease-in-out; + } } -} -#remoteButton.collapse-button, -.collapse-button { - left: calc(var(--header-width-collapse) - 1px) !important; -} + .collapse-toggle { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + min-width: 28px; + border-radius: 6px; + color: var(--sidebar-section-color); + cursor: pointer; + transition: background 0.125s ease-in-out, color 0.125s ease-in-out; + + &:hover { + background: var(--sidebar-item-hover); + color: var(--sidebar-accent); + } -.collapsed-notify-counter { - margin-left: -20px; - margin-top: -16px; + i { + font-size: 16px; + transition: transform 0.125s ease-in-out; + } + } } -#logotype { - margin: 0 0 18px 0; - height: 80px; - min-height: 80px; - max-height: 80px; - display: flex; - align-items: center; - justify-content: space-between; - grid-column-gap: 10px; - column-gap: 10px; - cursor: pointer; - padding: 0px 0px 0px 24px; +#navbar.collapse #logotype { + flex-direction: column; + height: auto; + row-gap: 10px; + padding: 12px 0; + justify-content: center; - #company-logo { - max-width: 32px; - max-height: 32px; - min-width: 32px; - min-height: 32px; - width: 32px; - height: 32px; - background-size: 100%; - background-origin: border-box; - background-repeat: no-repeat; + .logotype-brand { + justify-content: center; } - span { - width: max(100%, 100% - 32px); - color: #fff; - font-family: Inter, serif; - font-size: 20px; - font-style: normal; - font-weight: 700; - line-height: normal; - transition: opacity 0.125s ease-in-out, width 0.125s ease-in-out; - padding-left: 12px; - text-transform: uppercase; + .collapse-toggle { + display: flex; } } + .hidden-logotype { - display: none; + display: none !important; opacity: 0; } +/* ── Menu list ─────────────────────────────────────────────────────────── */ #menuBar { flex: 1; min-height: 150px; overflow-y: auto; + padding: 0 12px; &::-webkit-scrollbar { width: 0; } } -#footerBar { - margin-top: 18px; - display: flex; - flex-direction: column; +.menu-section { + font-size: 11px; + font-weight: 500; + letter-spacing: 0.6px; + text-transform: uppercase; + color: var(--sidebar-section-color); + padding: 14px 12px 4px; } .item-block { - transition: height 0.125s ease-in-out; - overflow-x: hidden; -} - -.without-icon { - margin-left: calc(16px + 16px); -} - -.rotate-180 { - transform: rotate(180deg); -} - -.icon-color { - fill: var(--color-primary); -} - -.icon-color-grey { - fill: var(--color-secondary); - color: var(--color-secondary); - transition: color 0.25s ease-in-out, fill 0.25s ease-in-out; -} - -.icon-color-grey:hover { - fill: var(--guardian-on-primary-color); - color: var(--guardian-on-primary-color); -} - -.cursor-pointer { - cursor: pointer; + position: relative; } .item { display: flex; align-items: center; - column-gap: 16px; + column-gap: 12px; border-radius: 8px; - min-height: 48px; - max-height: 48px; - padding: 0 16px; + min-height: 40px; + padding: 0 12px; + margin-bottom: 2px; white-space: nowrap; box-sizing: border-box; - margin: 0 16px 8px 16px; - transition: background 0.125s ease-in-out, - opacity 0.125s ease-in-out, - width 0.125s ease-in-out, - height 0.125s ease-in-out; - - img { - width: 16px; - height: 16px; + color: var(--sidebar-item-color); + transition: background 0.125s ease-in-out, color 0.125s ease-in-out; + + .item-icon { + font-size: 18px; + min-width: 18px; + text-align: center; + color: inherit; } span { display: flex; align-items: center; column-gap: 10px; - color: #fff; - font-family: Inter, serif; + color: inherit; + font-family: var(--font-family-inter, Inter, sans-serif); font-size: 14px; - font-style: normal; font-weight: 500; line-height: 20px; - - strong { - color: #fff; - font-family: Inter, serif; - font-size: 16px; - font-style: normal; - font-weight: 700; - line-height: 16px; - } } .span-icon { @@ -210,144 +171,365 @@ align-items: center; } - .flex-column-gap-10 { - display: flex; - column-gap: 14px; + .chevron { + font-size: 14px; + color: var(--sidebar-section-color); } } -.hidden-block { - max-height: 0; - overflow-y: hidden; -} - .clickable { cursor: pointer; - transition: background 0.125s ease-in-out; &:hover { - background: rgba(255, 255, 255, 0.15); + background: var(--sidebar-item-hover); } } +/* Active leaf / top-level item: solid brand pill */ .current { - background: rgba(255, 255, 255, 0.15); + background: var(--sidebar-active-bg); + color: var(--sidebar-active-color); + + span, + .item-icon, + .chevron { + color: var(--sidebar-active-color); + } } -.background-light { - background: rgba(255, 255, 255, 0.15); +/* Parent whose child is the current route: highlight text, no fill */ +.parent-active:not(.current) { + color: var(--sidebar-accent); + + .item-icon { + color: var(--sidebar-accent); + } } -.border-item { - border: 2px solid rgba(255, 255, 255, 0.15); +/* ── Expanded inline accordion children ────────────────────────────────── */ +.item-container { + margin: 2px 0 6px 21px; + padding-left: 6px; + border-left: 1.5px solid var(--sidebar-border); } -.balance-item { - cursor: pointer; +.child-item { + min-height: 34px; + padding-left: 12px; - &>span { - display: flex; - justify-content: space-between; - width: 100%; + span { + font-size: 13.5px; + font-weight: 400; } - &.collapsed-item { + &.current { + position: relative; + background: var(--sidebar-item-hover); + color: var(--sidebar-accent); - div, span { - display: none; + color: var(--sidebar-accent); + font-weight: 500; + } + + &::before { + content: ''; + position: absolute; + left: -7px; + top: 8px; + bottom: 8px; + width: 3px; + border-radius: 3px; + background: var(--sidebar-accent); } } } +.without-icon { + margin-left: 0; +} -.boundary-box { - height: 78px; - display: flex; - align-items: center; - border-top: 1px solid rgba(255, 255, 255, 0.4); - padding-top: 8px; +.smooth-rotate { + transition: transform 0.125s ease-in-out; +} - .item { - width: 100%; +.rotate-180 { + transform: rotate(180deg); +} + +/* ── Collapsed flyout (children popover) ───────────────────────────────── */ +.item-block.has-flyout { + .flyout { + display: none; + position: absolute; + left: 100%; + margin-left: -1px; + top: 0; + min-width: 210px; + background: var(--guardian-background); + border: 1px solid var(--sidebar-border); + border-radius: 12px; + box-shadow: 0 8px 24px var(--guardian-shadow, rgba(0, 0, 0, 0.12)); + padding: 8px; + z-index: 1001; + + .flyout-title { + font-size: 12px; + font-weight: 500; + color: var(--guardian-font-color); + padding: 4px 10px 8px; + } + + .flyout-item { + display: flex; + align-items: center; + min-height: 32px; + padding: 0 10px; + border-radius: 7px; + color: var(--sidebar-item-color); + + span { + font-size: 13.5px; + font-weight: 400; + } + + &.current { + background: var(--sidebar-item-hover); + color: var(--sidebar-accent); + + span { + color: var(--sidebar-accent); + font-weight: 500; + } + } + } } - .span-icon span { - max-width: 140px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - vertical-align: middle; + &:hover .flyout { + display: block; } } -.smooth-rotate { - transition: transform 0.125s ease-in-out; +.collapse .item { + justify-content: center; + padding: 0; + margin: 0 auto 4px; + width: 44px; + height: 44px; + min-height: 44px; } -.preloader { - width: 100%; +/* ── Footer ────────────────────────────────────────────────────────────── */ +#footerBar { display: flex; - justify-content: flex-end; - - &-image { - width: 16px; - height: 16px; - border-top: 3px solid var(--header-preloader-color); - border-left: 3px solid rgba(0, 0, 0, 0); - border-right: 3px solid rgba(0, 0, 0, 0); - border-bottom: 3px solid rgba(0, 0, 0, 0); - border-radius: 100%; - filter: brightness(100%); - animation-name: preloaderRotation; - animation-duration: 7.5s; - animation-iteration-count: infinite; - animation-timing-function: ease-in-out; + flex-direction: column; + padding: 8px 12px 12px; + border-top: 1px solid var(--sidebar-border); + margin-top: 8px; +} + +.cursor-pointer { + cursor: pointer; +} + +.notification-item { + position: relative; +} + +/* Keep the badge out of flow so the bell stays put / centred whether or not a + notification count is present. */ +.notification-item .collapsed-notify-counter { + position: absolute; + top: 4px; + right: 8px; + margin: 0; +} + +.user-box { + margin-top: 4px; + padding-top: 8px; + border-top: 1px solid var(--sidebar-border); +} + +/* The profile row is a footer control, not a nav target — give it a soft active + state instead of the solid brand pill used for menu items. */ +.user-item.current { + background: var(--sidebar-item-hover); + color: var(--sidebar-item-color); + + span, + .item-icon { + color: var(--sidebar-item-color); + } +} + +#navbar.collapse .user-item.current { + background: transparent; +} + +.user-item { + .user-avatar { + width: 32px; + height: 32px; + min-width: 32px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background: var(--guardian-primary-background); + color: var(--sidebar-accent); + font-size: 12px; + font-weight: 500; } - @keyframes preloaderRotation { - 0% { - transform: rotate(0deg); - opacity: 1; + .user-meta { + display: flex; + flex-direction: column; + justify-content: center; + min-width: 0; + line-height: 1.25; + + .user-name { + max-width: 150px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 14px; + font-weight: 500; } - 25% { - transform: rotate(360deg); - border-top: 3px solid rgba(0, 0, 0, 0); - border-right: 3px solid var(--header-preloader-color); - border-left: 3px solid rgba(0, 0, 0, 0); - border-bottom: 3px solid rgba(0, 0, 0, 0); + .user-balance { + font-size: 12px; + font-weight: 400; + color: var(--sidebar-section-color); } + } + + .logout-icon { + margin-left: auto; + color: var(--sidebar-section-color); + cursor: pointer; + transition: color 0.125s ease-in-out; - 50% { - transform: rotate(720deg); - border-top: 3px solid rgba(0, 0, 0, 0); - border-left: 3px solid rgba(0, 0, 0, 0); - border-bottom: 3px solid var(--header-preloader-color); - border-right: 3px solid rgba(0, 0, 0, 0); + &:hover { + color: var(--sidebar-accent); } + } +} + +/* Compact balance pill used in the horizontal top bar (no "Accounts" label). */ +.balance-chip { + display: flex; + align-items: center; + column-gap: 7px; + height: 34px; + padding: 0 12px; + border: 1px solid var(--sidebar-border); + border-radius: 20px; + cursor: pointer; + color: var(--sidebar-item-color); + transition: background 0.125s ease-in-out; + + i { + font-size: 16px; + } + + span { + font-size: 13px; + font-weight: 500; + white-space: nowrap; + } + + &:hover { + background: var(--sidebar-item-hover); + } +} + +/* ── Horizontal top bar (PrimeNG menubar) ──────────────────────────────── */ +.topbar { + position: fixed; + top: 0; + left: 0; + right: 0; + height: var(--header-height); + z-index: 100; - 75% { - transform: rotate(1080deg); - border-top: 3px solid rgba(0, 0, 0, 0); - border-bottom: 3px solid rgba(0, 0, 0, 0); - border-right: 3px solid rgba(0, 0, 0, 0); - border-left: 3px solid var(--header-preloader-color); + .topbar-brand { + display: flex; + align-items: center; + column-gap: 10px; + cursor: pointer; + padding-right: 14px; + margin-right: 6px; + border-right: 1px solid var(--sidebar-border); + + #company-logo { + width: 28px; + height: 28px; + border-radius: 8px; + object-fit: contain; } - 100% { - transform: rotate(1440deg); - border-top: 3px solid var(--header-preloader-color); - border-left: 3px solid rgba(0, 0, 0, 0); - border-right: 3px solid rgba(0, 0, 0, 0); - border-bottom: 3px solid rgba(0, 0, 0, 0); + #company-name { + color: var(--sidebar-logo-color); + font-family: var(--font-family-inter, Inter, sans-serif); + font-size: 15px; + font-weight: 500; + white-space: nowrap; } } } +::ng-deep .topbar .guardian-menubar.p-menubar { + height: var(--header-height); + border: none; + border-bottom: 1px solid var(--sidebar-border); + border-radius: 0; + background: var(--guardian-background); + padding: 0 14px; +} + +::ng-deep .topbar .guardian-menubar .p-menubar-root-list { + column-gap: 4px; +} + +::ng-deep .topbar .guardian-menubar .p-menubar-end { + margin-left: auto; + display: flex; + align-items: center; + column-gap: 6px; +} + +/* Footer actions are shared with the vertical rail; inside the top bar they must sit + inline and compact (no full-width rows, no solid pills, no vertical dividers). */ +.topbar { + .item { + margin: 0; + width: auto; + min-height: 40px; + padding: 0 10px; + color: var(--sidebar-item-color); + } + + .item .span-icon { + width: auto; + column-gap: 8px; + } + + .notification-item .span-icon > span { + display: none; + } + + .user-box { + margin: 0; + padding: 0; + border: none; + } +} + +/* ── Badge & tooltip ───────────────────────────────────────────────────── */ .badge { - background-color: #ff432a; + background-color: var(--color-accent-red-1, #ff432a); width: min-content; display: flex; align-items: center; @@ -358,9 +540,8 @@ span { color: #fff; - font-family: Inter, serif; + font-family: var(--font-family-inter, Inter, sans-serif); font-size: 12px; - font-style: normal; font-weight: 500; line-height: 20px; } @@ -371,10 +552,9 @@ } .notification-counter { - color: #FFF; - font-family: Inter, serif; + color: #fff; + font-family: var(--font-family-inter, Inter, sans-serif); font-size: 12px; - font-style: normal; font-weight: 500; line-height: 20px; pointer-events: none; @@ -384,4 +564,3 @@ white-space: nowrap !important; max-width: none !important; } - diff --git a/frontend/src/app/views/new-header/new-header.component.ts b/frontend/src/app/views/new-header/new-header.component.ts index e8a5f14dd5..ad54b6c96a 100644 --- a/frontend/src/app/views/new-header/new-header.component.ts +++ b/frontend/src/app/views/new-header/new-header.component.ts @@ -1,5 +1,7 @@ import { Component, Input, OnInit, AfterViewInit, ElementRef, ViewChild, NgZone, AfterViewChecked } from '@angular/core'; +import { MenuItem } from 'primeng/api'; import { getMenuItems, NavbarMenuItem } from './menu.model'; +import { MenuLayout, MenuLayoutService } from '../../services/menu-layout.service'; import { IUser, UserCategory, UserPermissions, UserRole } from '@guardian/interfaces'; import { AuthStateService } from '../../services/auth-state.service'; import { AuthService } from '../../services/auth.service'; @@ -28,6 +30,8 @@ export class NewHeaderComponent implements OnInit, AfterViewChecked { public smallMenuMode: boolean = false; public notificationOpen: boolean = false; public menuItems: NavbarMenuItem[]; + public horizontalModel: MenuItem[] = []; + public layout: MenuLayout = 'vertical'; public activeLink: string = ''; public activeLinkRoot: string = ''; @@ -58,7 +62,8 @@ export class NewHeaderComponent implements OnInit, AfterViewChecked { public headerProps: HeaderPropsService, private brandingService: BrandingService, private externalPoliciesService: ExternalPoliciesService, - private docWidgetService: DocWidgetService) { + private docWidgetService: DocWidgetService, + public menuLayout: MenuLayoutService) { this.router.events.subscribe((event) => { if (event instanceof NavigationEnd) { this.update(); @@ -71,6 +76,15 @@ export class NewHeaderComponent implements OnInit, AfterViewChecked { } catch (error) { console.error(error) } + this.layout = this.menuLayout.layout; + this.menuLayout.changes.subscribe((layout) => { + this.layout = layout; + if (this.isLogin) { + this.applyContainerLayout(); + // the logo/name nodes are re-created when the layout template swaps + setTimeout(() => this.applyBranding()); + } + }); } ngOnInit(): void { @@ -191,30 +205,31 @@ export class NewHeaderComponent implements OnInit, AfterViewChecked { if (!isLogin) { this.remoteContainerMethod('NO_MARGIN'); } else { - this.remoteContainerMethod(this.smallMenuMode ? 'COLLAPSE' : 'EXPAND'); + this.applyContainerLayout(); } + this.syncActiveGroups(); this.updateRemotePolicyRequests(); - this.brandingService.getBrandingData().then(res => { - const logo = document.getElementById('company-logo') as HTMLImageElement; - if (logo) { - logo.src = res.companyLogoUrl; - if (res.companyLogoUrl) { - logo.style.display = 'block'; - } else { - logo.style.display = 'none'; - } - } - - if (document.getElementById('company-name')) { - document.getElementById('company-name')!.innerText = res.companyName; - } - }) + this.applyBranding(); }, () => { this.setStatus(false, null); }); } + private applyBranding() { + this.brandingService.getBrandingData().then(res => { + const logo = document.getElementById('company-logo') as HTMLImageElement; + if (logo) { + logo.src = res.companyLogoUrl; + logo.style.display = res.companyLogoUrl ? 'block' : 'none'; + } + const name = document.getElementById('company-name'); + if (name) { + name.innerText = res.companyName; + } + }); + } + private checkUsernameOverflow(): void { if (!this.usernameSpanRef) { return; @@ -230,6 +245,8 @@ export class NewHeaderComponent implements OnInit, AfterViewChecked { this.username = username; this.user = new UserPermissions(user); this.menuItems = getMenuItems(this.user); + this.horizontalModel = this.buildHorizontalModel(this.menuItems); + this.syncActiveGroups(); } setTimeout(() => this.checkUsernameOverflow()); @@ -251,31 +268,64 @@ export class NewHeaderComponent implements OnInit, AfterViewChecked { } public onNavbarMouseLeave() { + // Restore the persisted collapse state, unless the notification overlay is open. if (this.notificationOpen) { return; } this.menuCollapsed = this.smallMenuMode; } - public onNavbarMouseMove() { - if (this.notificationOpen || !this.menuCollapsed) { + private applyContainerLayout() { + if (this.layout === 'horizontal') { + this.remoteContainerMethod('HORIZONTAL'); + } else { + this.remoteContainerMethod(this.smallMenuMode ? 'COLLAPSE' : 'EXPAND'); + } + } + + /** Open the group whose child matches the current route (and close the others). */ + private syncActiveGroups() { + if (!this.menuItems) { return; } - this.menuCollapsed = false; + for (const item of this.menuItems) { + if (item.childItems) { + item.active = this.hasActiveChild(item); + } + } + } + + public hasActiveChild(barItem: NavbarMenuItem): boolean { + return !!barItem.childItems?.some( + (child) => !!child.routerLink && this.activeLink.startsWith(child.routerLink) + ); + } + + private buildHorizontalModel(items: NavbarMenuItem[]): MenuItem[] { + if (!items) { + return []; + } + return items.map((item) => { + const menuItem: MenuItem = { + label: item.title, + icon: item.icon ? `pi ${item.icon}` : undefined + }; + if (item.childItems?.length) { + menuItem.items = this.buildHorizontalModel(item.childItems); + } else if (item.routerLink) { + menuItem.routerLink = item.routerLink; + } + return menuItem; + }); } public toggleMenuMode() { this.smallMenuMode = !this.smallMenuMode; this.menuCollapsed = this.smallMenuMode; + // resizeMenu keeps the --header-width body variable in sync; fixed action bars + // (e.g. Settings/Branding) read it via CSS, so no per-element style fix-ups here. this.remoteContainerMethod(this.smallMenuMode ? 'COLLAPSE' : 'EXPAND'); - const fixedActionsContainer = document.getElementById('fixed-actions-container'); - if (fixedActionsContainer) { - fixedActionsContainer.style.left = !this.smallMenuMode ? - 'var(--header-width-expand)' : - 'var(--header-width-collapse)' - } - try { localStorage.setItem('MAIN_HEADER', String(this.smallMenuMode)); } catch (error) { @@ -288,6 +338,18 @@ export class NewHeaderComponent implements OnInit, AfterViewChecked { this.router.navigate([home]); } + /** Same rule as the profile page: prefer capital letters, else first two chars. */ + public getInitials(username: string | null): string { + if (!username) { + return '?'; + } + const caps = username.match(/[A-Z]/g); + if (caps && caps.length >= 2) { + return caps.slice(0, 2).join(''); + } + return username.slice(0, 2).toUpperCase(); + } + public goToBrandingPage(event: MouseEvent) { event.stopImmediatePropagation() this.router.navigate(['/branding']); diff --git a/frontend/src/app/views/root-profile/root-profile.component.html b/frontend/src/app/views/root-profile/root-profile.component.html index ab0a88d640..0d452bc06d 100644 --- a/frontend/src/app/views/root-profile/root-profile.component.html +++ b/frontend/src/app/views/root-profile/root-profile.component.html @@ -226,6 +226,21 @@
+
+
+ Menu layout + Navigation as a side rail or a top bar +
+ + +
+
diff --git a/frontend/src/app/views/root-profile/root-profile.component.ts b/frontend/src/app/views/root-profile/root-profile.component.ts index 332221af99..5c93bc4618 100644 --- a/frontend/src/app/views/root-profile/root-profile.component.ts +++ b/frontend/src/app/views/root-profile/root-profile.component.ts @@ -24,6 +24,7 @@ import { OtpDisableDialogComponent } from '../login/otp-disable-dialog/otp-disab import moment from 'moment'; import { ToastrService } from 'ngx-toastr'; import { AppTheme, AppThemeOption, AppThemeService } from '../../services/app-theme.service'; +import { MenuLayout, MenuLayoutOption, MenuLayoutService } from '../../services/menu-layout.service'; import { DocWidgetService } from '../../services/doc-widget.service'; enum OperationMode { @@ -127,6 +128,7 @@ export class RootProfileComponent implements OnInit, OnDestroy { private cdRef: ChangeDetectorRef, private docWidgetService: DocWidgetService, private appThemeService: AppThemeService, + private menuLayoutService: MenuLayoutService, private toastr: ToastrService ) { this.profile = null; @@ -925,6 +927,18 @@ export class RootProfileComponent implements OnInit, OnDestroy { this.appThemeService.setTheme(theme); } + get menuLayouts(): MenuLayoutOption[] { + return this.menuLayoutService.layouts; + } + + get selectedMenuLayout(): MenuLayout { + return this.menuLayoutService.layout; + } + + onMenuLayoutChange(layout: MenuLayout): void { + this.menuLayoutService.setLayout(layout); + } + onDocWidgetToggle(checked: boolean): void { this.docWidgetService.setEnabled(checked); } diff --git a/frontend/src/app/views/schemas/schemas.component.scss b/frontend/src/app/views/schemas/schemas.component.scss index 22a869afc1..62d0ea0e8a 100644 --- a/frontend/src/app/views/schemas/schemas.component.scss +++ b/frontend/src/app/views/schemas/schemas.component.scss @@ -722,7 +722,7 @@ a { .options-footer { padding: 12px 48px; - padding-left: calc(var(--header-width-expand) + 48px); + padding-left: calc(var(--header-width, var(--header-width-expand)) + 48px); display: flex; justify-content: space-between; position: fixed; diff --git a/frontend/src/app/views/token-config/token-config.component.scss b/frontend/src/app/views/token-config/token-config.component.scss index 08afa917c3..311d686514 100644 --- a/frontend/src/app/views/token-config/token-config.component.scss +++ b/frontend/src/app/views/token-config/token-config.component.scss @@ -297,7 +297,7 @@ .options-footer { padding: 12px 48px; - padding-left: calc(var(--header-width-expand) + 48px); + padding-left: calc(var(--header-width, var(--header-width-expand)) + 48px); display: flex; justify-content: space-between; position: fixed; diff --git a/frontend/src/variables.scss b/frontend/src/variables.scss index 0b2f8c9a55..6b02338b22 100644 --- a/frontend/src/variables.scss +++ b/frontend/src/variables.scss @@ -45,6 +45,21 @@ --header-height-policy: 175px; --header-background-color: #000; + /* Navigation menu (sidebar / top bar) — brand-tinted, light mode. + The look is driven entirely by these tokens; swap the ~9 values below for a + different palette (e.g. a neutral surface) without touching the template or + behavior. --sidebar-accent defaults to the brand primary, so customer branding + that overrides --color-primary automatically re-tints the active state. */ + --sidebar-bg: #F4F7FE; + --sidebar-item-color: #3A4A73; + --sidebar-item-hover: #E6EDFB; + --sidebar-section-color: #7F88A8; + --sidebar-active-bg: var(--color-primary); + --sidebar-active-color: #FFFFFF; + --sidebar-accent: var(--color-primary); + --sidebar-border: #D9E4FB; + --sidebar-logo-color: #26215C; + --table-row-height: 64px; --button-primary-color: #4169E2; @@ -157,6 +172,26 @@ --formula-variable-background: #3A2E12; --formula-function-background: #3A1730; --formula-text-background: #12351F; + + /* Navigation menu — brand-tinted, dark mode */ + --sidebar-bg: #171B24; + --sidebar-item-color: #AAB4C5; + --sidebar-item-hover: #202735; + --sidebar-section-color: #778299; + --sidebar-active-bg: #1C2742; + --sidebar-active-color: #B5D4F4; + --sidebar-accent: #5D7FE8; + --sidebar-border: #303746; + --sidebar-logo-color: #FFFFFF; +} + +/* Horizontal (top-bar) layout: zero the rail width so page content loses its left + gutter, and give the bar a height so content drops below it. Toggled on by + MenuLayoutService. */ +:root.layout-horizontal { + --header-width-expand: 0px; + --header-width-collapse: 0px; + --header-height: 56px; } @media (max-width: 810px) { From 88eb033c554af54694033df3af3e2a16619c80e5 Mon Sep 17 00:00:00 2001 From: Alex Piatakov Date: Tue, 16 Jun 2026 02:06:36 +0100 Subject: [PATCH 2/5] chore: remove unused menu icon assets Signed-off-by: Alex Piatakov --- frontend/src/assets/images/icons/16/wallet.svg | 3 --- frontend/src/assets/images/icons/chevron-white.svg | 4 ---- frontend/src/assets/images/icons/guard.svg | 5 ----- frontend/src/assets/images/icons/notification.svg | 5 ----- frontend/src/assets/images/icons/stars.svg | 11 ----------- frontend/src/assets/images/icons/twoRings.svg | 12 ------------ frontend/src/assets/images/icons/user.svg | 5 ----- 7 files changed, 45 deletions(-) delete mode 100644 frontend/src/assets/images/icons/16/wallet.svg delete mode 100644 frontend/src/assets/images/icons/chevron-white.svg delete mode 100644 frontend/src/assets/images/icons/guard.svg delete mode 100644 frontend/src/assets/images/icons/notification.svg delete mode 100644 frontend/src/assets/images/icons/stars.svg delete mode 100644 frontend/src/assets/images/icons/twoRings.svg delete mode 100644 frontend/src/assets/images/icons/user.svg diff --git a/frontend/src/assets/images/icons/16/wallet.svg b/frontend/src/assets/images/icons/16/wallet.svg deleted file mode 100644 index 19c9f2982a..0000000000 --- a/frontend/src/assets/images/icons/16/wallet.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/src/assets/images/icons/chevron-white.svg b/frontend/src/assets/images/icons/chevron-white.svg deleted file mode 100644 index 6369dd839e..0000000000 --- a/frontend/src/assets/images/icons/chevron-white.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - diff --git a/frontend/src/assets/images/icons/guard.svg b/frontend/src/assets/images/icons/guard.svg deleted file mode 100644 index d15d3687b4..0000000000 --- a/frontend/src/assets/images/icons/guard.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/frontend/src/assets/images/icons/notification.svg b/frontend/src/assets/images/icons/notification.svg deleted file mode 100644 index 4ee93a0e71..0000000000 --- a/frontend/src/assets/images/icons/notification.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/frontend/src/assets/images/icons/stars.svg b/frontend/src/assets/images/icons/stars.svg deleted file mode 100644 index 97dac4c33e..0000000000 --- a/frontend/src/assets/images/icons/stars.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - diff --git a/frontend/src/assets/images/icons/twoRings.svg b/frontend/src/assets/images/icons/twoRings.svg deleted file mode 100644 index 535cc6e4e6..0000000000 --- a/frontend/src/assets/images/icons/twoRings.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - diff --git a/frontend/src/assets/images/icons/user.svg b/frontend/src/assets/images/icons/user.svg deleted file mode 100644 index 733a0a5209..0000000000 --- a/frontend/src/assets/images/icons/user.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - From b25b33f778a2d3eb1caca342b1f5f9bba8af96b2 Mon Sep 17 00:00:00 2001 From: Alex Piatakov Date: Tue, 16 Jun 2026 09:48:03 +0100 Subject: [PATCH 3/5] refactor: address menu redesign review findings - Unsubscribe layout subscription on destroy - Remove dead hover-state handlers left from hover-to-expand - Share getUserInitials helper between header and profile - Guard no-op layout changes in MenuLayoutService - Cache branding data instead of refetching per navigation Signed-off-by: Alex Piatakov --- .../src/app/services/menu-layout.service.ts | 3 + frontend/src/app/utils/index.ts | 1 + frontend/src/app/utils/user-initials.ts | 14 ++++ .../new-header/new-header.component.html | 6 +- .../views/new-header/new-header.component.ts | 68 ++++++++----------- .../root-profile/root-profile.component.ts | 6 +- 6 files changed, 53 insertions(+), 45 deletions(-) create mode 100644 frontend/src/app/utils/user-initials.ts diff --git a/frontend/src/app/services/menu-layout.service.ts b/frontend/src/app/services/menu-layout.service.ts index f8bfd30bfa..ee6e31f65c 100644 --- a/frontend/src/app/services/menu-layout.service.ts +++ b/frontend/src/app/services/menu-layout.service.ts @@ -37,6 +37,9 @@ export class MenuLayoutService { public setLayout(layout: MenuLayout): void { const resolved = this.findLayout(layout).value; + if (resolved === this.layout$.value) { + return; + } try { localStorage.setItem(MENU_LAYOUT_STORAGE_KEY, resolved); } catch (error) { diff --git a/frontend/src/app/utils/index.ts b/frontend/src/app/utils/index.ts index 66812ac968..ebc6685ab5 100644 --- a/frontend/src/app/utils/index.ts +++ b/frontend/src/app/utils/index.ts @@ -3,3 +3,4 @@ export { CategoryAccess, CategoryDetails, CategoryGroup } from "./permissions-ca export { EntityAccess, EntityGroup } from "./permissions-entity"; export { PermissionsGroup } from "./permissions"; export { MergeUtils } from "./merge-utils"; +export { getUserInitials } from "./user-initials"; diff --git a/frontend/src/app/utils/user-initials.ts b/frontend/src/app/utils/user-initials.ts new file mode 100644 index 0000000000..f32f283677 --- /dev/null +++ b/frontend/src/app/utils/user-initials.ts @@ -0,0 +1,14 @@ +/** + * Two-letter avatar initials: prefer the first two capital letters, otherwise the + * first two characters uppercased. Shared by the header avatar and the profile page. + */ +export function getUserInitials(username: string | null | undefined): string { + if (!username) { + return '?'; + } + const caps = username.match(/[A-Z]/g); + if (caps && caps.length >= 2) { + return caps.slice(0, 2).join(''); + } + return username.slice(0, 2).toUpperCase(); +} diff --git a/frontend/src/app/views/new-header/new-header.component.html b/frontend/src/app/views/new-header/new-header.component.html index f359ca7571..bfe1ce54ac 100644 --- a/frontend/src/app/views/new-header/new-header.component.html +++ b/frontend/src/app/views/new-header/new-header.component.html @@ -14,7 +14,7 @@
} @else { -
+
diff --git a/frontend/src/app/views/new-header/new-header.component.ts b/frontend/src/app/views/new-header/new-header.component.ts index ad54b6c96a..d0daf5ebb6 100644 --- a/frontend/src/app/views/new-header/new-header.component.ts +++ b/frontend/src/app/views/new-header/new-header.component.ts @@ -1,6 +1,7 @@ -import { Component, Input, OnInit, AfterViewInit, ElementRef, ViewChild, NgZone, AfterViewChecked } from '@angular/core'; +import { Component, Input, OnInit, OnDestroy, AfterViewInit, ElementRef, ViewChild, NgZone, AfterViewChecked } from '@angular/core'; import { MenuItem } from 'primeng/api'; import { getMenuItems, NavbarMenuItem } from './menu.model'; +import { getUserInitials } from '../../utils'; import { MenuLayout, MenuLayoutService } from '../../services/menu-layout.service'; import { IUser, UserCategory, UserPermissions, UserRole } from '@guardian/interfaces'; import { AuthStateService } from '../../services/auth-state.service'; @@ -21,14 +22,13 @@ import { DocWidgetService } from '../../services/doc-widget.service'; styleUrls: ['./new-header.component.scss'], standalone: false }) -export class NewHeaderComponent implements OnInit, AfterViewChecked { +export class NewHeaderComponent implements OnInit, OnDestroy, AfterViewChecked { public isLogin: boolean = false; public user: UserPermissions = new UserPermissions(); public username: string | null = null; public balance: string = ''; public menuCollapsed: boolean = false; public smallMenuMode: boolean = false; - public notificationOpen: boolean = false; public menuItems: NavbarMenuItem[]; public horizontalModel: MenuItem[] = []; public layout: MenuLayout = 'vertical'; @@ -45,6 +45,8 @@ export class NewHeaderComponent implements OnInit, AfterViewChecked { private ws!: any; private authSubscription!: any; private policyRequestsSubscription = new Subscription(); + private layoutSubscription = new Subscription(); + private brandingData: any = null; @Input() remoteContainerMethod: any; @@ -77,14 +79,14 @@ export class NewHeaderComponent implements OnInit, AfterViewChecked { console.error(error) } this.layout = this.menuLayout.layout; - this.menuLayout.changes.subscribe((layout) => { + this.layoutSubscription.add(this.menuLayout.changes.subscribe((layout) => { this.layout = layout; if (this.isLogin) { this.applyContainerLayout(); // the logo/name nodes are re-created when the layout template swaps setTimeout(() => this.applyBranding()); } - }); + })); } ngOnInit(): void { @@ -147,6 +149,7 @@ export class NewHeaderComponent implements OnInit, AfterViewChecked { this.authSubscription = null; } this.policyRequestsSubscription.unsubscribe(); + this.layoutSubscription.unsubscribe(); } private resetBalance() { @@ -217,19 +220,31 @@ export class NewHeaderComponent implements OnInit, AfterViewChecked { } private applyBranding() { + // Branding doesn't change during a session, so fetch it once and re-apply the + // cached values to the logo/name nodes (which are re-created when the layout or + // collapse state swaps the template) without hitting the network each time. + if (this.brandingData) { + this.renderBranding(this.brandingData); + return; + } this.brandingService.getBrandingData().then(res => { - const logo = document.getElementById('company-logo') as HTMLImageElement; - if (logo) { - logo.src = res.companyLogoUrl; - logo.style.display = res.companyLogoUrl ? 'block' : 'none'; - } - const name = document.getElementById('company-name'); - if (name) { - name.innerText = res.companyName; - } + this.brandingData = res; + this.renderBranding(res); }); } + private renderBranding(res: any) { + const logo = document.getElementById('company-logo') as HTMLImageElement; + if (logo) { + logo.src = res.companyLogoUrl; + logo.style.display = res.companyLogoUrl ? 'block' : 'none'; + } + const name = document.getElementById('company-name'); + if (name) { + name.innerText = res.companyName; + } + } + private checkUsernameOverflow(): void { if (!this.usernameSpanRef) { return; @@ -260,21 +275,6 @@ export class NewHeaderComponent implements OnInit, AfterViewChecked { this.router.navigate(['/login']); } - public onNotificationOpenChange(open: boolean) { - this.notificationOpen = open; - if (!open && this.menuCollapsed !== this.smallMenuMode) { - this.menuCollapsed = this.smallMenuMode; - } - } - - public onNavbarMouseLeave() { - // Restore the persisted collapse state, unless the notification overlay is open. - if (this.notificationOpen) { - return; - } - this.menuCollapsed = this.smallMenuMode; - } - private applyContainerLayout() { if (this.layout === 'horizontal') { this.remoteContainerMethod('HORIZONTAL'); @@ -338,16 +338,8 @@ export class NewHeaderComponent implements OnInit, AfterViewChecked { this.router.navigate([home]); } - /** Same rule as the profile page: prefer capital letters, else first two chars. */ public getInitials(username: string | null): string { - if (!username) { - return '?'; - } - const caps = username.match(/[A-Z]/g); - if (caps && caps.length >= 2) { - return caps.slice(0, 2).join(''); - } - return username.slice(0, 2).toUpperCase(); + return getUserInitials(username); } public goToBrandingPage(event: MouseEvent) { diff --git a/frontend/src/app/views/root-profile/root-profile.component.ts b/frontend/src/app/views/root-profile/root-profile.component.ts index 5c93bc4618..8b07966572 100644 --- a/frontend/src/app/views/root-profile/root-profile.component.ts +++ b/frontend/src/app/views/root-profile/root-profile.component.ts @@ -26,6 +26,7 @@ import { ToastrService } from 'ngx-toastr'; import { AppTheme, AppThemeOption, AppThemeService } from '../../services/app-theme.service'; import { MenuLayout, MenuLayoutOption, MenuLayoutService } from '../../services/menu-layout.service'; import { DocWidgetService } from '../../services/doc-widget.service'; +import { getUserInitials } from '../../utils'; enum OperationMode { None, @@ -861,10 +862,7 @@ export class RootProfileComponent implements OnInit, OnDestroy { } getInitials(username: string | undefined): string { - if (!username) { return '?'; } - const caps = username.match(/[A-Z]/g); - if (caps && caps.length >= 2) { return caps.slice(0, 2).join(''); } - return username.slice(0, 2).toUpperCase(); + return getUserInitials(username); } formatRole(role: string | undefined): string { From e05291686b4c4e7684d7c2349f43d2a7a2ffc3d1 Mon Sep 17 00:00:00 2001 From: Alex Piatakov Date: Thu, 18 Jun 2026 11:31:25 +0100 Subject: [PATCH 4/5] fix: standardise balance and branding footer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add a shared formatBalance helper (3 decimals + ℏ) and use it for the menu and profile balances so they no longer differ in precision/unit. - Let the branding page grow with its content so the fixed action bar no longer overlaps the last card. Signed-off-by: Alex Piatakov --- frontend/src/app/utils/balance.ts | 13 +++++++++++++ frontend/src/app/utils/index.ts | 1 + .../app/views/branding/branding.component.scss | 6 ++++++ .../app/views/new-header/new-header.component.ts | 15 +++------------ .../root-profile/root-profile.component.html | 2 +- .../views/root-profile/root-profile.component.ts | 6 +++++- 6 files changed, 29 insertions(+), 14 deletions(-) create mode 100644 frontend/src/app/utils/balance.ts diff --git a/frontend/src/app/utils/balance.ts b/frontend/src/app/utils/balance.ts new file mode 100644 index 0000000000..3be48a6f06 --- /dev/null +++ b/frontend/src/app/utils/balance.ts @@ -0,0 +1,13 @@ +const HBAR_SYMBOL = 'ℏ'; + +/** Standardise a balance for display: 3 decimals + ℏ. Non-numeric input is passed through. */ +export function formatBalance(balance: string | number | null | undefined): string { + if (balance === null || balance === undefined || balance === '') { + return ''; + } + const value = typeof balance === 'number' ? balance : parseFloat(balance); + if (!isFinite(value)) { + return typeof balance === 'string' ? balance : ''; + } + return `${value.toFixed(3)} ${HBAR_SYMBOL}`; +} diff --git a/frontend/src/app/utils/index.ts b/frontend/src/app/utils/index.ts index ebc6685ab5..1c64601029 100644 --- a/frontend/src/app/utils/index.ts +++ b/frontend/src/app/utils/index.ts @@ -4,3 +4,4 @@ export { EntityAccess, EntityGroup } from "./permissions-entity"; export { PermissionsGroup } from "./permissions"; export { MergeUtils } from "./merge-utils"; export { getUserInitials } from "./user-initials"; +export { formatBalance } from "./balance"; diff --git a/frontend/src/app/views/branding/branding.component.scss b/frontend/src/app/views/branding/branding.component.scss index d5647ca068..ae9b4cdbc9 100644 --- a/frontend/src/app/views/branding/branding.component.scss +++ b/frontend/src/app/views/branding/branding.component.scss @@ -1,4 +1,10 @@ .guardian-page { + // The shared .guardian-page is height: 100% + flex, so a plain padding-bottom + // can't reserve room for the fixed actions bar — overflowing content scrolls + // flush under it. Let the page grow with its content instead so the padding + // becomes real scroll space below the last card. + height: auto; + min-height: 100%; padding-bottom: 88px; } diff --git a/frontend/src/app/views/new-header/new-header.component.ts b/frontend/src/app/views/new-header/new-header.component.ts index d0daf5ebb6..602236b624 100644 --- a/frontend/src/app/views/new-header/new-header.component.ts +++ b/frontend/src/app/views/new-header/new-header.component.ts @@ -1,7 +1,7 @@ import { Component, Input, OnInit, OnDestroy, AfterViewInit, ElementRef, ViewChild, NgZone, AfterViewChecked } from '@angular/core'; import { MenuItem } from 'primeng/api'; import { getMenuItems, NavbarMenuItem } from './menu.model'; -import { getUserInitials } from '../../utils'; +import { formatBalance, getUserInitials } from '../../utils'; import { MenuLayout, MenuLayoutService } from '../../services/menu-layout.service'; import { IUser, UserCategory, UserPermissions, UserRole } from '@guardian/interfaces'; import { AuthStateService } from '../../services/auth-state.service'; @@ -96,8 +96,7 @@ export class NewHeaderComponent implements OnInit, OnDestroy, AfterViewChecked { this.ws = this.webSocketService.profileSubscribe((event) => { if (event.type === 'PROFILE_BALANCE') { if (event.data && event.data.balance) { - const b = parseFloat(event.data.balance); - this.balance = `${b.toFixed(3)} ${event.data.unit}`; + this.balance = formatBalance(event.data.balance); } else { this.balance = 'N\\A'; this.balanceType = ''; @@ -166,15 +165,7 @@ export class NewHeaderComponent implements OnInit, OnDestroy, AfterViewChecked { this.auth.balance().subscribe((balance: any) => { if (balance && balance.balance) { const b = parseFloat(balance.balance); - if (b > 999) { - this.balance = `${b.toFixed(0)} ${balance.unit}`; - } else if (b > 99) { - this.balance = `${b.toFixed(2)} ${balance.unit}`; - } else if (b > 9) { - this.balance = `${b.toFixed(3)} ${balance.unit}`; - } else { - this.balance = `${b.toFixed(4)} ${balance.unit}`; - } + this.balance = formatBalance(b); if (b > 100) { this.balanceType = 'normal'; } else if (b > 20) { diff --git a/frontend/src/app/views/root-profile/root-profile.component.html b/frontend/src/app/views/root-profile/root-profile.component.html index 0d452bc06d..7b1dcdcfe1 100644 --- a/frontend/src/app/views/root-profile/root-profile.component.html +++ b/frontend/src/app/views/root-profile/root-profile.component.html @@ -65,7 +65,7 @@
Balance - {{ balance }} + {{ formatBalance(balance) }}
diff --git a/frontend/src/app/views/root-profile/root-profile.component.ts b/frontend/src/app/views/root-profile/root-profile.component.ts index 8b07966572..a766498540 100644 --- a/frontend/src/app/views/root-profile/root-profile.component.ts +++ b/frontend/src/app/views/root-profile/root-profile.component.ts @@ -26,7 +26,7 @@ import { ToastrService } from 'ngx-toastr'; import { AppTheme, AppThemeOption, AppThemeService } from '../../services/app-theme.service'; import { MenuLayout, MenuLayoutOption, MenuLayoutService } from '../../services/menu-layout.service'; import { DocWidgetService } from '../../services/doc-widget.service'; -import { getUserInitials } from '../../utils'; +import { formatBalance, getUserInitials } from '../../utils'; enum OperationMode { None, @@ -865,6 +865,10 @@ export class RootProfileComponent implements OnInit, OnDestroy { return getUserInitials(username); } + formatBalance(balance: string | null): string { + return formatBalance(balance); + } + formatRole(role: string | undefined): string { if (!role) { return ''; } return role.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(' '); From 8e3e3295963ec7d173a74f82a37ab81c9d682723 Mon Sep 17 00:00:00 2001 From: Alex Piatakov Date: Thu, 18 Jun 2026 20:56:10 +0100 Subject: [PATCH 5/5] fix: show notification dot in collapsed menu Render a plain red dot instead of the unread count in the collapsed sidebar so it no longer overlaps the bell icon. Signed-off-by: Alex Piatakov --- .../notification/notification.component.html | 5 +++-- .../notification/notification.component.scss | 12 ++++++++++++ .../notification/notification.component.ts | 5 ++++- .../app/views/new-header/new-header.component.html | 2 +- 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/components/notification/notification.component.html b/frontend/src/app/components/notification/notification.component.html index ce1c2affcd..dfec6e7bd0 100644 --- a/frontend/src/app/components/notification/notification.component.html +++ b/frontend/src/app/components/notification/notification.component.html @@ -2,9 +2,10 @@
- + {{ unreadNotifications }}
diff --git a/frontend/src/app/components/notification/notification.component.scss b/frontend/src/app/components/notification/notification.component.scss index 1a8871dec3..2d00985c82 100644 --- a/frontend/src/app/components/notification/notification.component.scss +++ b/frontend/src/app/components/notification/notification.component.scss @@ -57,6 +57,18 @@ } } +.badge-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #ff432a; + cursor: pointer; + + &:hover { + filter: brightness(1.2); + } +} + .notification-position { pointer-events: none; position: fixed; diff --git a/frontend/src/app/components/notification/notification.component.ts b/frontend/src/app/components/notification/notification.component.ts index 88da8880a6..2407c2c4a4 100644 --- a/frontend/src/app/components/notification/notification.component.ts +++ b/frontend/src/app/components/notification/notification.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; import { Router } from '@angular/router'; import { NotificationType, NotifyAPI, } from '@guardian/interfaces'; import { ToastrService } from 'ngx-toastr'; @@ -19,6 +19,9 @@ export class NotificationComponent implements OnInit { menuOpened: boolean = false; subscription = new Subscription(); + /** Show a plain red dot instead of the unread count (used in the collapsed menu). */ + @Input() compact: boolean = false; + @Output() menuOpenedChange = new EventEmitter(); viewDetails($event: MouseEvent, notification: any) { diff --git a/frontend/src/app/views/new-header/new-header.component.html b/frontend/src/app/views/new-header/new-header.component.html index bfe1ce54ac..3741009303 100644 --- a/frontend/src/app/views/new-header/new-header.component.html +++ b/frontend/src/app/views/new-header/new-header.component.html @@ -110,7 +110,7 @@ @if (menuCollapsed && layout === 'vertical') {
- +
}