fix(ui): sync sidebar active state when navigating via logo#6609
fix(ui): sync sidebar active state when navigating via logo#6609iruzen-dono wants to merge 1 commit into
Conversation
Clicking the Flowise logo navigates to /chatflows via react-router Link but does not dispatch MENU_OPEN to update the sidebar's active state. Result: the previously clicked sidebar item remains highlighted even though the current page is Chatflows. Fix by dispatching MENU_OPEN with id='chatflows' on logo click. Fixes FlowiseAI#6510
There was a problem hiding this comment.
Code Review
This pull request updates the LogoSection component to dispatch a MENU_OPEN action (setting the active menu to 'chatflows') when the logo is clicked. The review feedback points out that the click handler should ignore modified clicks (like Cmd/Ctrl + Click) or non-primary clicks to prevent updating the sidebar state in the current tab when a user intends to open the link in a new tab.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| const handleLogoClick = (e) => { | ||
| dispatch({ type: MENU_OPEN, id: 'chatflows' }) | ||
| } |
There was a problem hiding this comment.
When a user performs a modified click (such as Cmd/Ctrl + Click) or a middle-click on the logo to open the link in a new tab, the onClick handler still executes in the current tab. This causes the sidebar active state to unexpectedly change to 'chatflows' in the current tab, even though no navigation occurred there.
To prevent this, we should ignore clicks that are modified or not performed with the primary (left) mouse button.
| const handleLogoClick = (e) => { | |
| dispatch({ type: MENU_OPEN, id: 'chatflows' }) | |
| } | |
| const handleLogoClick = (e) => { | |
| if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return | |
| dispatch({ type: MENU_OPEN, id: 'chatflows' }) | |
| } |
There was a problem hiding this comment.
Pull request overview
Fixes a UI state inconsistency where clicking the Flowise logo navigates back to Chatflows but leaves the previously-selected sidebar item highlighted, by syncing the sidebar active state on logo navigation.
Changes:
- Add Redux dispatch on logo click to activate the
chatflowssidebar item when navigating via the logo. - Introduce
useDispatchusage in the logo section to triggerMENU_OPEN.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const handleLogoClick = (e) => { | ||
| dispatch({ type: MENU_OPEN, id: 'chatflows' }) | ||
| } | ||
|
|
||
| return ( | ||
| <ButtonBase disableRipple component={Link} to={config.defaultPath} onClick={handleLogoClick}> | ||
| <Logo /> | ||
| </ButtonBase> | ||
| ) |
What
Sidebar active menu item remains highlighted after navigating via the Flowise logo back to Chatflows.
Root cause
The logo uses a
<Link to={config.defaultPath}>which navigates to/chatflowsbut does not dispatchMENU_OPENto sync the sidebar active state. The active state (customization.isOpen) still holds the previously clicked item id.Fix
Add a click handler on the logo button that dispatches
MENU_OPENwithid: "chatflows", so the Chatflows nav item becomes active when navigating via the logo.References
Closes #6510