Skip to content

feat: redesign navigation menu and layouts#6235

Draft
Pyatakov wants to merge 5 commits into
developfrom
feat/navigation-menu-redesign
Draft

feat: redesign navigation menu and layouts#6235
Pyatakov wants to merge 5 commits into
developfrom
feat/navigation-menu-redesign

Conversation

@Pyatakov

Copy link
Copy Markdown
Contributor

Description

  • Refresh the main navigation with a brand-tinted style driven by --sidebar-* design tokens in variables.scss, for both light and dark themes; the active-item accent follows the brand colour, so it can be re-themed by changing a small set of values.
  • Replace the previous mixed PNG/SVG icon system with PrimeIcons and add grouped section labels in the sidebar.
  • Auto-expand the menu group that contains the current route; when the rail is collapsed, child items now open as a flyout, and the collapse toggle moved into the header.
  • Add a user-selectable layout: the existing vertical sidebar or a new horizontal top bar built on PrimeNG p-menubar, switchable from the profile page and persisted to local storage.
  • Drive page content offset and fixed bottom action bars (Settings, Branding, policy viewer, and related pages) from the live --header-width variable so they track the rail width and no longer overlap content when the menu is collapsed or horizontal.
  • Reserve bottom space on the Application Branding page so its content clears the fixed action bar.

@github-actions

github-actions Bot commented Jun 16, 2026

Copy link
Copy Markdown

Test Results

 32 files  ±0   64 suites  ±0   8m 34s ⏱️ + 3m 3s
 35 tests ±0   35 ✅ ±0  0 💤 ±0  0 ❌ ±0 
165 runs  ±0  165 ✅ ±0  0 💤 ±0  0 ❌ ±0 

Results for commit 990d989. ± Comparison against base commit 70568b8.

♻️ This comment has been updated with latest results.

@Pyatakov Pyatakov self-assigned this Jun 16, 2026
@Pyatakov Pyatakov force-pushed the feat/navigation-menu-redesign branch 3 times, most recently from cfdc9df to 1c01d40 Compare June 18, 2026 17:20
Pyatakov added 5 commits June 19, 2026 10:47
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 <alex.piatakov@swirldslabs.com>
Signed-off-by: Alex Piatakov <alex.piatakov@swirldslabs.com>
- 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 <alex.piatakov@swirldslabs.com>
- 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 <alex.piatakov@swirldslabs.com>
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 <alex.piatakov@swirldslabs.com>
@Pyatakov Pyatakov force-pushed the feat/navigation-menu-redesign branch from 1992d69 to 990d989 Compare June 19, 2026 09:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant