feat: KYC re-verify UX, family/nominee tab gating, savings dialogs, cfcfrms shell

- KYC tab: fix Verify (PAN) and Send OTP (Aadhaar) being disabled in edit mode;
  unmask Aadhaar input and show on-file masked value as hint; resolve kycId
  from id/kycId/resourceId fallbacks.
- Client stepper/view: add familyAllowed / nomineeAllowed predicates +
  CanActivate route guards. Family tab hidden for non-individuals, Nominee
  tab hidden for non-proprietor entities. Family-members step accepts a
  nomineeOnly input for proprietorship clients. Add/Edit/Delete buttons
  inside family-members and nominee tabs gated by canAdd.
- cfcfrms: add cfcfrms-shell wrapper, restyle complaint/fraud/mule/escalate
  pages and dashboard.
- Savings: identity-verify and transaction-confirm dialogs, manage / activate
  / add-charge flows, account preview styling.
- Tasks, core shell, account-nominees, icons: minor style and behaviour
  updates.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
2026-05-21 18:49:43 +05:30
co-authored by Claude Opus 4.7
parent bf3e26a0d0
commit b149fef72e
99 changed files with 8575 additions and 2574 deletions
+206 -57
View File
@@ -89,20 +89,36 @@
<span class="ti-d">│</span>
</ng-template>
<!-- Main Header — 2-Row Navigation -->
<!-- ============================================================
Main Header — 2-Row Navigation
============================================================
CURRENT ORDER (per design SS, 20 May 2026):
Row 1: Client Master · CFCFRMS · Approvals · Cashier · Clearing ·
Deposits · Advances · Share · NPA · General Ledger ·
Sub Ledger
Row 2: Accounting · CKYC · Insurance · Digital · HRM ·
Admin · RBI · Reports · Others · Reconciliation ·
Documents Hub
TO REVERT: delete the new <div class="main-header">…</div>
block below and uncomment the OLD-ORDER block kept as an
HTML comment for easy rollback.
============================================================ -->
<!--
════════ OLD ORDER — KEPT FOR EASY REVERT ════════
Row 1: Institution · Tasks · Accounting · Reports · Admin · Sub Ledger ·
General Ledger · Cashier · Officer · Deposits · Clearing
Row 2: HRM · Share · Others · NPA · Advances · Insurance · RBI ·
Digital · Reconciliation · CKYC Mgmt · Letter Mgmt
<div class="main-header">
<!-- Row 1 — 11 items (permission-gated) -->
<div class="nav-row r1">
<a class="ni" tabindex="0" [matMenuTriggerFor]="institutionMenu" *mifosxHasPermission="'MENU_INSTITUTION'">
<fa-icon icon="university" class="ni-ico"></fa-icon>Institution
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a
class="ni"
tabindex="0"
routerLink="/checker-inbox-and-tasks/checker-inbox"
*mifosxHasPermission="'MENU_TASKS'"
>
<a class="ni" tabindex="0" routerLink="/checker-inbox-and-tasks/checker-inbox" *mifosxHasPermission="'MENU_TASKS'">
<fa-icon icon="check" class="ni-ico"></fa-icon>Tasks
</a>
<a class="ni" tabindex="0" routerLink="/accounting" *mifosxHasPermission="'MENU_ACCOUNTING'">
@@ -116,21 +132,11 @@
<fa-icon icon="shield-alt" class="ni-ico"></fa-icon>Admin
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a
class="ni"
tabindex="0"
(click)="subLedgerOpen = !subLedgerOpen; glMenuOpen = false"
*mifosxHasPermission="'MENU_SUB_LEDGER'"
>
<a class="ni" tabindex="0" (click)="subLedgerOpen = !subLedgerOpen; glMenuOpen = false" *mifosxHasPermission="'MENU_SUB_LEDGER'">
<fa-icon icon="book" class="ni-ico"></fa-icon>Sub Ledger
<fa-icon [icon]="subLedgerOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
</a>
<a
class="ni"
tabindex="0"
(click)="glMenuOpen = !glMenuOpen; subLedgerOpen = false"
*mifosxHasPermission="'MENU_GENERAL_LEDGER'"
>
<a class="ni" tabindex="0" (click)="glMenuOpen = !glMenuOpen; subLedgerOpen = false" *mifosxHasPermission="'MENU_GENERAL_LEDGER'">
<fa-icon icon="book-open" class="ni-ico"></fa-icon>General Ledger
<fa-icon [icon]="glMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
</a>
@@ -150,8 +156,6 @@
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
</div>
<!-- Row 2 — 11 items (permission-gated) -->
<div class="nav-row r2">
<a class="ni" tabindex="0" [matMenuTriggerFor]="hrmMenu" *mifosxHasPermission="'MENU_HRM'">
<fa-icon icon="money-check" class="ni-ico"></fa-icon>HRM
@@ -177,12 +181,7 @@
<fa-icon icon="shield-alt" class="ni-ico"></fa-icon>Insurance
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a
class="ni"
tabindex="0"
(click)="rbiMenuOpen = !rbiMenuOpen; glMenuOpen = false"
*mifosxHasPermission="'MENU_RBI'"
>
<a class="ni" tabindex="0" (click)="rbiMenuOpen = !rbiMenuOpen; glMenuOpen = false" *mifosxHasPermission="'MENU_RBI'">
<fa-icon icon="university" class="ni-ico"></fa-icon>RBI
<fa-icon [icon]="rbiMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
</a>
@@ -204,6 +203,123 @@
</a>
</div>
</div>
════════ END OLD ORDER ════════
-->
<div class="main-header">
<!-- Row 1 — Client Master · CFCFRMS · Approvals · Cashier · Clearing · Deposits · Advances · Share · NPA · General Ledger · Sub Ledger -->
<div class="nav-row r1">
<a class="ni" tabindex="0" [matMenuTriggerFor]="institutionMenu" *mifosxHasPermission="'MENU_INSTITUTION'">
<fa-icon icon="users-cog" class="ni-ico"></fa-icon>Client Master
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a class="ni" tabindex="0" routerLink="/cfcfrms" *mifosxHasPermission="'SIDEBAR_CFCFRMS'">
<fa-icon icon="user-shield" class="ni-ico"></fa-icon>CFCFRMS
</a>
<a
class="ni"
tabindex="0"
routerLink="/checker-inbox-and-tasks/checker-inbox"
*mifosxHasPermission="'MENU_TASKS'"
>
<fa-icon icon="check" class="ni-ico"></fa-icon>Approvals
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="cashierMenu" *mifosxHasPermission="'MENU_CASHIER'">
<fa-icon icon="money-bill" class="ni-ico"></fa-icon>Cashier
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="clearingMenu" *mifosxHasPermission="'MENU_CLEARING'">
<fa-icon icon="exchange" class="ni-ico"></fa-icon>Clearing
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="depositsMenu" *mifosxHasPermission="'MENU_DEPOSITS'">
<fa-icon icon="piggy-bank" class="ni-ico"></fa-icon>Deposits
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="advancesMenu" *mifosxHasPermission="'MENU_ADVANCES'">
<fa-icon icon="hand-holding-usd" class="ni-ico"></fa-icon>Advances
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="shareMenu" *mifosxHasPermission="'MENU_SHARE'">
<fa-icon icon="coins" class="ni-ico"></fa-icon>Share
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="npaMenu" *mifosxHasPermission="'MENU_NPA'">
<fa-icon icon="exclamation-triangle" class="ni-ico"></fa-icon>NPA
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a
class="ni"
tabindex="0"
(click)="glMenuOpen = !glMenuOpen; subLedgerOpen = false"
*mifosxHasPermission="'MENU_GENERAL_LEDGER'"
>
<fa-icon icon="book-open" class="ni-ico"></fa-icon>General Ledger
<fa-icon [icon]="glMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
</a>
<a
class="ni"
tabindex="0"
(click)="subLedgerOpen = !subLedgerOpen; glMenuOpen = false"
*mifosxHasPermission="'MENU_SUB_LEDGER'"
>
<fa-icon icon="book" class="ni-ico"></fa-icon>Sub Ledger
<fa-icon [icon]="subLedgerOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
</a>
</div>
<!-- Row 2 — Accounting · CKYC · Insurance · Digital · HRM · Admin · RBI · Reports · Others · Reconciliation · Documents Hub -->
<div class="nav-row r2">
<a class="ni" tabindex="0" routerLink="/accounting" *mifosxHasPermission="'MENU_ACCOUNTING'">
<fa-icon icon="money-bill-alt" class="ni-ico"></fa-icon>Accounting
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="ckycMenu" *mifosxHasPermission="'MENU_CKYC_MGMT'">
<fa-icon icon="fingerprint" class="ni-ico"></fa-icon>CKYC
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="insuranceMenu" *mifosxHasPermission="'MENU_INSURANCE'">
<fa-icon icon="shield-alt" class="ni-ico"></fa-icon>Insurance
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="digitalMenu" *mifosxHasPermission="'MENU_DIGITAL'">
<fa-icon icon="mobile-alt" class="ni-ico"></fa-icon>Digital
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="hrmMenu" *mifosxHasPermission="'MENU_HRM'">
<fa-icon icon="money-check" class="ni-ico"></fa-icon>HRM
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="adminMenu" *mifosxHasPermission="'MENU_ADMIN'">
<fa-icon icon="shield-alt" class="ni-ico"></fa-icon>Admin
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a
class="ni"
tabindex="0"
(click)="rbiMenuOpen = !rbiMenuOpen; glMenuOpen = false"
*mifosxHasPermission="'MENU_RBI'"
>
<fa-icon icon="university" class="ni-ico"></fa-icon>RBI
<fa-icon [icon]="rbiMenuOpen ? 'caret-up' : 'caret-down'" class="ni-caret"></fa-icon>
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="reportsMenu" *mifosxHasPermission="'MENU_REPORTS'">
<fa-icon icon="chart-bar" class="ni-ico"></fa-icon>Reports
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="othersMenu" *mifosxHasPermission="'MENU_OTHERS'">
<fa-icon icon="folder-open" class="ni-ico"></fa-icon>Others
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="reconciliationMenu" *mifosxHasPermission="'MENU_CONFIG_WIZARD'">
<fa-icon icon="sync-alt" class="ni-ico"></fa-icon>Reconciliation
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
<a class="ni" tabindex="0" [matMenuTriggerFor]="letterMgmtMenu" *mifosxHasPermission="'MENU_LETTER_MGMT'">
<fa-icon icon="envelope" class="ni-ico"></fa-icon>Documents Hub
<fa-icon icon="caret-down" class="ni-caret"></fa-icon>
</a>
</div>
</div>
<!-- LIVE KPI TICKER (below the menu — pauses on hover) -->
<div class="kpi-ticker" role="marquee" aria-label="Live key-performance ticker">
@@ -252,35 +368,65 @@
</button>
</mat-menu>
<mat-menu #adminMenu="matMenu" [overlapTrigger]="false" class="nav-dropdown">
<button mat-menu-item [routerLink]="['/appusers']" tabindex="0">
<i class="fa fa-user-cog menu-item-icon"></i> Users
</button>
<button mat-menu-item [routerLink]="['/organization']" tabindex="0">
<i class="fa fa-sitemap menu-item-icon"></i> Organization
</button>
<button mat-menu-item [routerLink]="['/system']" tabindex="0">
<i class="fa fa-server menu-item-icon"></i> System
</button>
<button mat-menu-item [routerLink]="['/products']" tabindex="0">
<i class="fa fa-box menu-item-icon"></i> Products
</button>
<button mat-menu-item routerLink="/templates" tabindex="0">
<i class="fa fa-file-alt menu-item-icon"></i> Templates
</button>
<button mat-menu-item routerLink="/otp-audit-logs" tabindex="0">
<i class="fa fa-key menu-item-icon"></i> OTP Audit Logs
</button>
<mat-divider></mat-divider>
<button mat-menu-item tabindex="0">
<fa-icon icon="building" class="menu-item-icon" style="color: #7c3aed"></fa-icon> Bank Profile
</button>
<button mat-menu-item tabindex="0">
<fa-icon icon="user-tie" class="menu-item-icon" style="color: #7c3aed"></fa-icon> Statutory Auditor Appointment
</button>
<button mat-menu-item tabindex="0">
<fa-icon icon="clipboard-check" class="menu-item-icon" style="color: #7c3aed"></fa-icon> Internal Audit Report
</button>
<!-- Admin Mega Menu — 3-column rectangular panel grouping Setup,
Catalog and Audit & Compliance entries. -->
<mat-menu #adminMenu="matMenu" class="admin-mega-panel" [overlapTrigger]="false">
<div class="deposit-menu-grid admin-grid" (click)="$event.stopPropagation()">
<!-- Setup -->
<div class="deposit-menu-group">
<div class="deposit-group-title">Setup</div>
<button mat-menu-item [routerLink]="['/appusers']" tabindex="0">
<fa-icon icon="user-cog" class="menu-item-icon" style="color: #7c3aed"></fa-icon>
Users
</button>
<button mat-menu-item [routerLink]="['/organization']" tabindex="0">
<fa-icon icon="sitemap" class="menu-item-icon" style="color: #7c3aed"></fa-icon>
Organization
</button>
<button mat-menu-item [routerLink]="['/system']" tabindex="0">
<fa-icon icon="server" class="menu-item-icon" style="color: #7c3aed"></fa-icon>
System
</button>
</div>
<!-- Catalog -->
<div class="deposit-menu-group">
<div class="deposit-group-title">Catalog</div>
<button mat-menu-item [routerLink]="['/products']" tabindex="0">
<fa-icon icon="box" class="menu-item-icon" style="color: #7c3aed"></fa-icon>
Products
</button>
<button mat-menu-item routerLink="/templates" tabindex="0">
<fa-icon icon="file-alt" class="menu-item-icon" style="color: #7c3aed"></fa-icon>
Templates
</button>
<button mat-menu-item routerLink="/otp-audit-logs" tabindex="0">
<fa-icon icon="key" class="menu-item-icon" style="color: #7c3aed"></fa-icon>
OTP Audit Logs
</button>
</div>
<!-- Audit & Compliance -->
<div class="deposit-menu-group">
<div class="deposit-group-title">Audit &amp; Compliance</div>
<button mat-menu-item tabindex="0">
<fa-icon icon="building" class="menu-item-icon" style="color: #7c3aed"></fa-icon>
Bank Profile
</button>
<button mat-menu-item tabindex="0">
<fa-icon icon="user-tie" class="menu-item-icon" style="color: #7c3aed"></fa-icon>
Statutory Auditor Appointment
</button>
<button mat-menu-item tabindex="0">
<fa-icon icon="clipboard-check" class="menu-item-icon" style="color: #7c3aed"></fa-icon>
Internal Audit Report
</button>
<button mat-menu-item routerLink="/rbi-circulars" tabindex="0">
<fa-icon icon="newspaper" class="menu-item-icon" style="color: #7c3aed"></fa-icon>
RBI Circulars &amp; Notifications
</button>
</div>
</div>
</mat-menu>
<!-- Sub Ledger Mega Menu -->
@@ -873,6 +1019,9 @@
</button>
</mat-menu>
<!-- CFCFRMS — single landing page (CfcfrmsShell) hosts the full
workflow as pill-tabs, so no header dropdown is needed. -->
<!-- Reconciliation Mega Menu -->
<mat-menu #reconciliationMenu="matMenu" class="reconciliation-mega-panel" [overlapTrigger]="false">
<div class="deposit-menu-grid reconciliation-grid" (click)="$event.stopPropagation()">
+34 -11
View File
@@ -130,25 +130,32 @@ $gray-700: #334155;
border-bottom: 2.5px solid $brand;
box-shadow: 0 1px 4px rgb(0 0 0 / 7%);
position: sticky;
top: 0;
/* Sit directly under the sticky toolbar (32px tall) so both stay visible. */
top: 32px;
z-index: 900;
overflow: visible;
}
.nav-row {
height: 44px;
display: grid;
grid-template-columns: repeat(11, minmax(0, 1fr));
display: flex;
align-items: stretch;
overflow: visible;
position: relative;
/* Grid container background shows through the 1 px gap as crisp 1 px borders
on every side of every cell — no doubled-up 2 px lines between adjacent
items, perfect 1 px outer frame too. */
gap: 1px;
background: $gray-200;
/* Outer frame; vertical dividers between cells are drawn as `border-right`
on each `.ni` below. Switched away from the equal-column grid so each
cell can size to its own label — long names (General Ledger, Documents
Hub) no longer overflow and short ones (Approvals, HRM) no longer waste
space. */
border: 1px solid $gray-200;
background: #fff;
}
.r2.nav-row {
/* Row 2 shares the row-1 bottom edge — collapse the duplicate border. */
border-top: none;
}
.r1 .ni {
@@ -168,7 +175,17 @@ $gray-700: #334155;
justify-content: center;
gap: 7px;
height: 100%;
padding: 0 10px;
/* Each cell sizes to its own label (min-width: max-content) and grows
to share any leftover row width. Short labels stay compact, long ones
get the room they need — no overlap, no wasted gap. */
flex: 1 0 auto;
min-width: max-content;
padding: 0 14px;
/* Vertical divider between adjacent cells; outer frame is the row's
own border, and the last cell drops its right border below. */
border-right: 1px solid $gray-200;
cursor: pointer;
white-space: nowrap;
font-family:
@@ -193,8 +210,8 @@ $gray-700: #334155;
&::before {
content: '';
position: absolute;
left: 8px;
right: 8px;
left: 4px;
right: 4px;
top: 0;
height: 3px;
background: transparent;
@@ -224,6 +241,12 @@ $gray-700: #334155;
outline: 2px solid $brand;
outline-offset: -2px;
}
/* Last cell in a row sits flush against the row's own right edge, so
drop its divider to avoid a double 2 px line. */
&:last-child {
border-right: none;
}
}
.ni-ico {
@@ -159,83 +159,25 @@
<a matLine>{{ 'labels.menus.Analytics' | translate }}</a>
</mat-list-item>
</ng-container>
<!-- CFCFRMS Section -->
<!-- CFCFRMS Section — single entry points to the unified shell page
(CfcfrmsShell, /cfcfrms) which exposes Dashboard, Complaints,
Escalate and the three Report flows as in-page pill tabs. -->
<ng-container *mifosxHasPermission="'SIDEBAR_CFCFRMS'">
<div class="nav-item-sep mt-1">
<mat-divider></mat-divider>
<span class="text-muted">{{ 'labels.menus.CFCFRMS' | translate }}</span>
</div>
<mat-list-item
[routerLink]="['/cfcfrms/dashboard']"
[routerLink]="['/cfcfrms']"
[matTooltipPosition]="tooltipPosition"
matTooltip="{{ 'tooltips.CFCFRMS Dashboard' | translate }}"
routerLinkActive="active-menu"
[routerLinkActiveOptions]="{ exact: true }"
>
<mat-icon matListIcon>
<fa-icon icon="shield-alt" size="sm"></fa-icon>
</mat-icon>
<a matLine>{{ 'labels.menus.CFCFRMS Dashboard' | translate }}</a>
</mat-list-item>
<mat-list-item
[routerLink]="['/cfcfrms/complaints']"
[matTooltipPosition]="tooltipPosition"
matTooltip="{{ 'tooltips.Complaints' | translate }}"
routerLinkActive="active-menu"
[routerLinkActiveOptions]="{ exact: false }"
>
<mat-icon matListIcon>
<fa-icon icon="list-alt" size="sm"></fa-icon>
</mat-icon>
<a matLine>{{ 'labels.menus.Complaints' | translate }}</a>
</mat-list-item>
<mat-list-item
[routerLink]="['/cfcfrms/escalate']"
[matTooltipPosition]="tooltipPosition"
matTooltip="{{ 'tooltips.Escalate Complaint' | translate }}"
routerLinkActive="active-menu"
[routerLinkActiveOptions]="{ exact: false }"
>
<mat-icon matListIcon>
<fa-icon icon="arrow-up" size="sm"></fa-icon>
</mat-icon>
<a matLine>{{ 'labels.menus.Escalate' | translate }}</a>
</mat-list-item>
<mat-list-item
[routerLink]="['/cfcfrms/report-suspect']"
[matTooltipPosition]="tooltipPosition"
matTooltip="{{ 'tooltips.Report Suspect' | translate }}"
matTooltip="{{ 'tooltips.CFCFRMS' | translate }}"
routerLinkActive="active-menu"
[routerLinkActiveOptions]="{ exact: false }"
>
<mat-icon matListIcon>
<fa-icon icon="user-shield" size="sm"></fa-icon>
</mat-icon>
<a matLine>{{ 'labels.menus.Report Suspect' | translate }}</a>
</mat-list-item>
<mat-list-item
[routerLink]="['/cfcfrms/report-mule']"
[matTooltipPosition]="tooltipPosition"
matTooltip="{{ 'tooltips.Report Mule Account' | translate }}"
routerLinkActive="active-menu"
[routerLinkActiveOptions]="{ exact: false }"
>
<mat-icon matListIcon>
<fa-icon icon="user-slash" size="sm"></fa-icon>
</mat-icon>
<a matLine>{{ 'labels.menus.Report Mule' | translate }}</a>
</mat-list-item>
<mat-list-item
[routerLink]="['/cfcfrms/report-fraud-txn']"
[matTooltipPosition]="tooltipPosition"
matTooltip="{{ 'tooltips.Report Fraud Transaction' | translate }}"
routerLinkActive="active-menu"
[routerLinkActiveOptions]="{ exact: false }"
>
<mat-icon matListIcon>
<fa-icon icon="exclamation-triangle" size="sm"></fa-icon>
</mat-icon>
<a matLine>{{ 'labels.menus.Report Fraud Txn' | translate }}</a>
<a matLine>{{ 'labels.menus.CFCFRMS' | translate }}</a>
</mat-list-item>
</ng-container>
@@ -11,6 +11,16 @@ $accent: #0ea5e9;
$accent-2: #10b981;
$top-h: 32px;
// Pin the toolbar to the top of the viewport so it stays visible while
// scrolling, just like the .main-header menu below it. z-index sits one tier
// above the menu so the toolbar's dropdowns / chips never get clipped.
:host {
display: block;
position: sticky;
top: 0;
z-index: 950;
}
// ===== Top Identity Bar =====
.top-bar {
height: $top-h;