11import { Menu , MenuProps } from 'antd' ;
22import Color from 'color' ;
3- import { useMemo , useState } from 'react' ;
3+ import { useEffect , useMemo , useState } from 'react' ;
44import { useMatches , useNavigate } from 'react-router-dom' ;
55
66import Scrollbar from '@/components/scrollbar' ;
@@ -37,27 +37,32 @@ export default function NavVertical(props: Props) {
3737const permissionRoutes = usePermissionRoutes ( ) ;
3838const flattenedRoutes = useFlattenedRoutes ( ) ;
3939
40- const [ collapsed , setCollapsed ] = useState ( themeLayout === ThemeLayout . Mini ) ;
40+ const collapsed = useMemo ( ( ) => themeLayout === ThemeLayout . Mini , [ themeLayout ] ) ;
41+
4142const menuList = useMemo ( ( ) => {
4243const menuRoutes = menuFilter ( permissionRoutes ) ;
4344return routeToMenuFn ( menuRoutes ) ;
4445} , [ routeToMenuFn , permissionRoutes ] ) ;
4546
4647const selectedKeys = useMemo ( ( ) => [ pathname ] , [ pathname ] ) ;
47- const openKeys = useMemo ( ( ) => {
48- const keys = matches
49- . filter ( ( match ) => match . pathname !== '/' )
50- . filter ( ( match ) => match . pathname !== pathname )
51- . map ( ( match ) => match . pathname ) ;
52- return keys ;
53- } , [ matches , pathname ] ) ;
48+
49+ const [ openKeys , setOpenKeys ] = useState < string [ ] > ( [ ] ) ;
50+
51+ useEffect ( ( ) => {
52+ if ( ! collapsed ) {
53+ const keys = matches
54+ . filter ( ( match ) => match . pathname !== '/' )
55+ . filter ( ( match ) => match . pathname !== pathname )
56+ . map ( ( match ) => match . pathname ) ;
57+ setOpenKeys ( keys ) ;
58+ }
59+ } , [ matches , pathname , collapsed ] ) ;
5460
5561const handleToggleCollapsed = ( ) => {
5662setSettings ( {
5763 ...settings ,
5864themeLayout :collapsed ?ThemeLayout . Vertical :ThemeLayout . Mini ,
5965} ) ;
60- setCollapsed ( ! collapsed ) ;
6166} ;
6267
6368const onClick :MenuProps [ 'onClick' ] = ( { key, keyPath} ) => {
@@ -75,6 +80,12 @@ export default function NavVertical(props: Props) {
7580props ?. closeSideBarDrawer ?.( ) ;
7681} ;
7782
83+ const handleOpenChange :MenuProps [ 'onOpenChange' ] = ( keys ) => {
84+ if ( ! collapsed ) {
85+ setOpenKeys ( keys ) ;
86+ }
87+ } ;
88+
7889return (
7990< div
8091style = { {
@@ -94,6 +105,7 @@ export default function NavVertical(props: Props) {
94105style = { { backgroundColor :colorBgElevated } }
95106className = "h-full !border-none"
96107onClick = { onClick }
108+ onOpenChange = { handleOpenChange }
97109/>
98110</ Scrollbar >
99111</ div >
