nav-menu: update to top-nav layout - #6136
Open
wesrupert wants to merge 1 commit into
Open
Conversation
BundleMonFiles updated (1)
Unchanged files (3)
Total files change -21.42KB -0.14% Final result: ✅ View report in BundleMon website ➡️ |
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the main window navigation from a vertical sider layout to a horizontal top-nav Menu, restructuring nav item rendering to support rc-menu overflow measurement and aligning related styling/layout.
Changes:
- Render
NavMenuas a top-nav bar inMainand replace the previous sider/container structure. - Refactor feature navigation into
useFeaturesNav()so feature items render as flatMenu.Itemchildren. - Update
MenuItemto distinguish wrapper vs. innerMenu.Itemstyling and adjust nav/menu LESS styling; removeNotificationsAreafromStudioFooter.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| app/components-react/windows/Main.tsx | Moves NavMenu to render directly under TitleBar for top-nav layout. |
| app/components-react/shared/MenuItem.tsx | Splits wrapper vs. inner Menu.Item props to support overflow/flex layout needs. |
| app/components-react/shared/MenuItem.m.less | Adjusts wrapper layout to be a flex child suitable for horizontal menus. |
| app/components-react/root/StudioFooter.tsx | Removes NotificationsArea from the footer in preparation for relocation. |
| app/components-react/nav-menu/NavTools.tsx | Converts NavTools into a hook returning { items, modals } for inlining in NavMenu. |
| app/components-react/nav-menu/NavMenu.tsx | Switches NavMenu to an antd Menu in horizontal mode and inlines feature/tool items. |
| app/components-react/nav-menu/NavMenu.m.less | Reworks nav styling for a horizontal menu bar. |
| app/components-react/nav-menu/FeaturesNav.tsx | Converts FeaturesNav into useFeaturesNav() returning flat items; updates Ultra/dashboard handling. |
| app/components-react/nav-menu/FeaturesNav.m.less | Adds top-nav-specific styles for feature items (badges, active state, responsiveness). |
Suppressed comments (1)
app/components-react/nav-menu/NavTools.tsx:204
modalsis currently an empty TODO, butAuthModalis rendered insideitems(above), which makes it a child of the parent<Menu>whenitemsis inlined inNavMenu. Modals should be returned viamodals, anditemsshould only contain menu nodes.
const modals = <>{/* TODO @nav: Add relevant modals */}</>;
return { items, modals };
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| className={cx(styles.menuitemWrapper, wrapperClassName)} | ||
| style={wrapperStyle} | ||
| > | ||
| <Menu.Item {...itemProps} className={cx(styles.navMenuItem, p?.className)} title={false}> |
michelinewu
approved these changes
Aug 28, 2026
| className={cx(styles.menuitemWrapper, wrapperClassName)} | ||
| style={wrapperStyle} | ||
| > | ||
| <Menu.Item {...itemProps} className={cx(styles.navMenuItem, p?.className)} title={false}> |
Replaces the vertical Layout/Sider sidebar with a horizontal Menu, converting FeaturesNav and NavTools into hooks so their items render as flat Menu.Item children. - Convert `FeaturesNav` and `NavTools` from components into `useFeaturesNav`/`useNavTools` hooks, inlined directly in `NavMenu` so rc-menu's overflow measurement sees individual items - Rework `MenuItem` to separate `wrapperClassName`/`wrapperStyle` (outer flex child) from `className`/`style` (inner `Menu.Item`) - Drop the login help tip and the left-dock handling that no longer apply to a horizontal bar - Remove `NotificationsArea` from `StudioFooter` ahead of moving it into the nav
wesrupert
force-pushed
the
feat/wr/nav/pr/2
branch
from
August 31, 2026 22:32
40bbefc to
e331e54
Compare
wesrupert
force-pushed
the
feat/wr/nav/pr/3
branch
from
August 31, 2026 22:32
2b54e5c to
0ef2ccf
Compare
This was referenced Sep 2, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stack:
master<-../1<-../2<-feat/wr/nav/pr/3<-../4<-../5Can merge separate from children? No
See PR 5 for screenshots of final product.
Figma: link
Replaces the vertical Layout/Sider sidebar with a horizontal Menu, converting FeaturesNav and NavTools into hooks so their items render as flat Menu.Item children.
FeaturesNavandNavToolsfrom components intouseFeaturesNav/useNavToolshooks, inlined directly inNavMenuso rc-menu's overflow measurement sees individual itemsMenuItemto separatewrapperClassName/wrapperStyle(outer flex child) fromclassName/style(innerMenu.Item)NotificationsAreafromStudioFooterahead of moving it into the nav