Fix sidebar active state after navigation

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 (
         <ListItemButton