Reorganize nav menu and add collapsible sidebar by jack-gale-ethyca · Pull Request #7488 · ethyca/fides

jack-gale-ethyca · 2026-02-25T19:52:28Z

Description Of Changes

Break Settings into three sections: Core configuration, Compliance, and Settings
Add collapsible nav with smooth expand/collapse transition and logo crossfade
Style flyout menus with minos background, corinth text, and proper padding
Add selected parent icon highlight and hover states in collapsed mode
Fix content width to expand properly when nav collapses (FixedLayout, system pages)
Fix content bounce on expand via flex-based layout in _app.tsx
Make dev Plus nav override reliable using NODE_ENV instead of NEXT_PUBLIC_APP_ENV

Steps to Confirm

View the left nav menu and ensure settings pages are regrouped and in the proper buckets
Select these views to make sure the navigation is working (Hover states, selected states, page loading)
Select the fides logo to collapse the menu, ensure you can hover and navigate to all pages.
Ensure the main page contents span to the full width of screen when the menu is collapsed
Check the data map report and make sure the table renders to the width of the page and you can scroll horizontally.
Ensure this works for fides and fides-plus users

Pre-Merge Checklist

- Break Settings into three sections: Core configuration, Compliance, and Settings - Add collapsible nav with smooth expand/collapse transition and logo crossfade - Style flyout menus with minos background, corinth text, and proper padding - Add selected parent icon highlight and hover states in collapsed mode - Fix content width to expand properly when nav collapses (FixedLayout, system pages) - Fix content bounce on expand via flex-based layout in _app.tsx - Make dev Plus nav override reliable using NODE_ENV instead of NEXT_PUBLIC_APP_ENV Co-authored-by: Cursor <cursoragent@cursor.com>

vercel · 2026-02-25T19:52:33Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	Feb 26, 2026 10:03pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		Feb 26, 2026 10:03pm

greptile-apps · 2026-02-25T19:56:17Z

Greptile Summary

This PR reorganizes the navigation menu structure and adds a collapsible sidebar feature with smooth animations and visual improvements.

Major changes:

Reorganized settings menu items into three distinct sections: Core configuration (taxonomy, integrations, notifications, custom fields, properties, domains), Compliance (locations, regulations), and Settings (privacy requests, users, organization, email templates, consent)
Added collapsible navigation sidebar with smooth expand/collapse transitions (0.35s ease), logo crossfade between expanded (107px) and collapsed (24px icon) states, and localStorage persistence
Styled flyout menus with minos background (#2b2e35), corinth text (#fafafa), selected state highlighting, and hover states
Fixed content width expansion by using flex-based layout in _app.tsx with flex={1}, minWidth={0}, and overflow="hidden" to prevent content bounce
Made dev Plus nav override more reliable by using NODE_ENV === "development" instead of NEXT_PUBLIC_APP_ENV for the devShowPlusNav check
Updated all Cypress tests to account for new nav structure and prevent collapsed state during testing

Issues found:

The PR exceeds the file count limit (18 files changed vs. 15 file limit)
Hardcoded color values in SCSS that should be extracted as named variables

The implementation is well-structured with proper state management, smooth transitions, and comprehensive test updates.

Confidence Score: 4/5

This PR is safe to merge with only minor style improvements needed
The implementation is solid with proper state management, smooth transitions, comprehensive test coverage, and no logical errors. The score is 4 (not 5) due to two issues: (1) the PR exceeds the 15-file limit with 18 files changed, and (2) hardcoded color values in SCSS that should be extracted as named variables per coding standards. These are minor concerns that don't affect functionality.
NavMenu.module.scss needs color values extracted into named variables. Otherwise, no files require special attention.

Important Files Changed

Filename	Overview
clients/admin-ui/src/features/common/nav/NavMenu.module.scss	Adds styles for collapsible nav with flyout menus; contains hardcoded color values that should be extracted
clients/admin-ui/src/features/common/nav/MainSideNav.tsx	Implements collapsible sidebar with logo crossfade and localStorage persistence; uses window access for localStorage
clients/admin-ui/src/features/common/nav/nav-config.tsx	Reorganizes settings into three sections (Core configuration, Compliance, Settings); uses window.Cypress directly
clients/admin-ui/src/features/common/features/features.slice.ts	Uses NODE_ENV instead of NEXT_PUBLIC_APP_ENV for dev Plus nav override, making it more reliable
clients/admin-ui/src/pages/_app.tsx	Fixes content bounce on expand via flex-based layout with flex=1, minWidth=0, overflow=hidden

_{Last reviewed commit: 7e39f64}

greptile-apps

_{18 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

clients/admin-ui/src/features/common/nav/NavMenu.module.scss

jack-gale-ethyca · 2026-02-25T20:09:45Z

I fixed the hardcoded colors so that should be OK. I also ran this through our FE dev rules so that should be looking good now.

jack-gale-ethyca · 2026-02-26T22:10:31Z

@jpople @nrxsmith This is now ready for review, I passed this through our dev rules and cleaned up a few things. The PR size check is failing but that's just due to the number of files changed. I can't complete this fully without touching a number of files.

jpople

Code looks okay, few minor tweaks and I think we shouldn't ship the devShowPlusNav option.

UX-wise, I don't think the icons are sufficiently clear to actually be usable for navigation when collapsed-- might help to at least add the section headings into the flyout menus too.

I wonder also if there's a way we can more clearly communicate that clicking the logo is what toggles the collapsed state, I'm not sure I would ever come to that conclusion on my own.

Last thing, if possible it'd be nice to have more visual continuity with the logo during the expand-collapse animation; notice how the square logo transitions in and out despite remaining in the same place overall.

Screen.Recording.2026-02-27.at.14.38.20.mov

jpople · 2026-02-27T20:07:26Z

clients/admin-ui/src/features/common/features/features.slice.ts

+export const devShowPlusNav =
+  process.env.NODE_ENV === "development" &&
+  process.env.NEXT_PUBLIC_DEV_SHOW_PLUS_NAV === "true";
+


Is this something that we foresee end users ever using or was it just so you could develop this without a Plus backend? If the latter I would take it out before merging.

jpople · 2026-02-27T20:21:36Z

clients/admin-ui/cypress/support/ant-support.ts

+      visitWithExpandedNav: (
+        url: string,
+        options?: Partial<Cypress.VisitOptions>,
+      ) => Chainable;


I don't actually think this is necessary, the nav should be expanded by default in all our tests. Cypress starts with clean local storage and none of the tests ever writes true to it.

jpople · 2026-02-27T20:30:07Z

clients/admin-ui/src/features/common/nav/MainSideNav.tsx

There's a lot of inline styles in this file that could be cleaned up and moved into the SCSS module, which I think would be cleaner.

jpople · 2026-02-27T20:30:37Z

clients/admin-ui/src/features/common/nav/nav-config.test.ts

        hasFidesCloud: false,
      });

+      const coreConfig = navGroups.find(


We should use the findGroups helper here too.

jack-gale-ethyca requested a review from a team as a code owner February 25, 2026 19:52

jack-gale-ethyca requested review from jpople and removed request for a team February 25, 2026 19:52

greptile-apps bot reviewed Feb 25, 2026

View reviewed changes

clients/admin-ui/src/features/common/nav/NavMenu.module.scss Outdated Show resolved Hide resolved

Adde change log

971b4d2

jack-gale-ethyca requested a review from nrxsmith February 25, 2026 19:57

Updated hard coded hex values

7c7a6df

vercel bot deployed to Preview – fides-plus-nightly February 25, 2026 20:09 View deployment

Fixed flagged FE rules

2831787

vercel bot deployed to Preview – fides-plus-nightly February 26, 2026 22:03 View deployment

jpople reviewed Feb 27, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reorganize nav menu and add collapsible sidebar#7488

Reorganize nav menu and add collapsible sidebar#7488
jack-gale-ethyca wants to merge 4 commits intomainfrom
systems_nav

jack-gale-ethyca commented Feb 25, 2026 •

edited

Loading

Uh oh!

vercel bot commented Feb 25, 2026 •

edited

Loading

Uh oh!

greptile-apps bot commented Feb 25, 2026

Uh oh!

greptile-apps bot left a comment

Uh oh!

Uh oh!

jack-gale-ethyca commented Feb 25, 2026 •

edited

Loading

Uh oh!

jack-gale-ethyca commented Feb 26, 2026

Uh oh!

jpople left a comment

Uh oh!

jpople Feb 27, 2026

Uh oh!

jpople Feb 27, 2026

Uh oh!

jpople Feb 27, 2026

Uh oh!

jpople Feb 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

jack-gale-ethyca commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description Of Changes

Steps to Confirm

Pre-Merge Checklist

Uh oh!

vercel bot commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot commented Feb 25, 2026

Greptile Summary

Confidence Score: 4/5

Important Files Changed

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jack-gale-ethyca commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jack-gale-ethyca commented Feb 26, 2026

Uh oh!

jpople left a comment

Choose a reason for hiding this comment

Uh oh!

jpople Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

jpople Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

jpople Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

jpople Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jack-gale-ethyca commented Feb 25, 2026 •

edited

Loading

vercel bot commented Feb 25, 2026 •

edited

Loading

jack-gale-ethyca commented Feb 25, 2026 •

edited

Loading