feat: redesign navigation menu and layouts

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)';

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,

frontend/src/app/components/notification/notification.component.html

@@ -2,9 +2,10 @@
     <div
         *ngIf="unreadNotifications > 0"
         (click)="onMenuOpened($event, notificationMenu)"
-        class="badge"
+        [class.badge]="!compact"
+        [class.badge-dot]="compact"
     >
-        <span class="notification-counter">
+        <span *ngIf="!compact" class="notification-counter">
             {{ unreadNotifications }}
         </span>
     </div>

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;

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<boolean>();
 
     viewDetails($event: MouseEvent, notification: any) {

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;

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;
 }

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;
 }

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%;

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;
 }

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;

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;

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;

frontend/src/app/services/menu-layout.service.ts

@@ -0,0 +1,72 @@
+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<MenuLayout>(this.readStoredLayout());
+
+    constructor() {
+        this.applyLayoutClass(this.layout$.value);
+    }
+
+    public get layout(): MenuLayout {
+        return this.layout$.value;
+    }
+
+    public get changes(): Observable<MenuLayout> {
+        return this.layout$.asObservable();
+    }
+
+    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) {
+            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];
+    }
+}

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}`;
+}

frontend/src/app/utils/index.ts

@@ -3,3 +3,5 @@ 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";
+export { formatBalance } from "./balance";

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();
+}

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;

frontend/src/app/views/branding/branding.component.scss

@@ -1,3 +1,13 @@
+.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;
+}
+
 .not-exist {
     position: absolute;
     left: 48px;
@@ -55,13 +65,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;