Fix sidebar active state after navigation

[vicksiyi]

Summary

• Sync sidebar active menu state whenever the route pathname changes.
• Keep Chatflows selected when navigating back through the Flowise logo/default route.

Fixes #6510

Tests

• git diff --check
• pnpm --dir packages/ui build

[gemini-code-assist]

Code Review

This pull request refactors the NavItem component to use the useLocation hook from react-router-dom instead of accessing document.location.pathname directly, and adds location.pathname to the useEffect dependency array to ensure the active menu item updates correctly on route changes. The reviewer suggested optimizing this hook by checking if the menu item is already open before dispatching MENU_OPEN to prevent redundant Redux dispatches and unnecessary re-renders, as well as caching the split pathname.

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.

[gemini-code-assist]

To avoid redundant Redux dispatches and unnecessary re-renders of all menu items on every route change, we should check if the menu item is already open before dispatching MENU_OPEN. Additionally, we can cache the split pathname to avoid splitting the string multiple times. Disabling the exhaustive-deps lint rule here is acceptable to prevent infinite loops during initial content loading.

Suggested change

	useEffect(() => {
	if (navType === 'MENU') {
	const currentIndex = document.location.pathname
	.toString()
	const currentIndex = location.pathname
	.split('/')
	.findIndex((id) => id === item.id)
	if (currentIndex > -1) {
	dispatch({ type: MENU_OPEN, id: item.id })
	}
	if (!document.location.pathname.toString().split('/')[1]) {
	itemHandler('chatflows')
	if (!location.pathname.split('/')[1] && item.id === 'chatflows') {
	dispatch({ type: MENU_OPEN, id: item.id })
	}
	}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [navType])
	}, [navType, location.pathname])
	useEffect(() => {
	if (navType === 'MENU') {
	const pathParts = location.pathname.split('/')
	const currentIndex = pathParts.findIndex((id) => id === item.id)
	const isAlreadyOpen = customization.isOpen.includes(item.id)
	if (currentIndex > -1 && !isAlreadyOpen) {
	dispatch({ type: MENU_OPEN, id: item.id })
	}
	if (!pathParts[1] && item.id === 'chatflows' && !isAlreadyOpen) {
	dispatch({ type: MENU_OPEN, id: item.id })
	}
	}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [navType, location.pathname])

References

1. It is acceptable to disable the exhaustive-deps lint rule for a useEffect hook if including a dependency would cause an infinite loop, and the effect's purpose is to run only once to load initial content.

[vicksiyi]

Updated in f6d81df to cache the path parts and skip MENU_OPEN dispatches when the item is already active.