diff --git a/packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.jsx b/packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.jsx index 10445554bd0..c1cfea9dee9 100644 --- a/packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.jsx +++ b/packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types' import { forwardRef, useEffect } from 'react' -import { Link } from 'react-router-dom' +import { Link, useLocation } from 'react-router-dom' import { useDispatch, useSelector } from 'react-redux' // material-ui @@ -21,6 +21,7 @@ const NavItem = ({ item, level, navType, onClick, onUploadFile }) => { const dispatch = useDispatch() const customization = useSelector((state) => state.customization) const matchesSM = useMediaQuery(theme.breakpoints.down('lg')) + const location = useLocation() const Icon = item.icon const itemIcon = item?.icon ? ( @@ -80,20 +81,20 @@ const NavItem = ({ item, level, navType, onClick, onUploadFile }) => { // active menu item on page load useEffect(() => { if (navType === 'MENU') { - const currentIndex = document.location.pathname - .toString() - .split('/') - .findIndex((id) => id === item.id) - if (currentIndex > -1) { + 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 (!document.location.pathname.toString().split('/')[1]) { - itemHandler('chatflows') + if (!pathParts[1] && item.id === 'chatflows' && !isAlreadyOpen) { + dispatch({ type: MENU_OPEN, id: item.id }) } } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [navType]) + }, [navType, location.pathname]) return (