fix logo click & item collapse issue (#57)

Author: ct-jahidhasan

src/layout/MainLayout/LogoSection/index.js

@@ -1,18 +1,24 @@
 import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
 
 // material-ui
 import { ButtonBase } from '@mui/material';
 
 // project imports
 import config from 'config';
 import Logo from 'ui-component/Logo';
+import { MENU_OPEN } from 'store/actions';
 
 // ==============================|| MAIN LOGO ||============================== //
 
-const LogoSection = () => (
-    <ButtonBase disableRipple component={Link} to={config.defaultPath}>
-        <Logo />
-    </ButtonBase>
-);
+const LogoSection = () => {
+    const defaultId = useSelector((state) => state.customization.defaultId);
+    const dispatch = useDispatch();
+    return (
+        <ButtonBase disableRipple onClick={() => dispatch({ type: MENU_OPEN, id: defaultId })} component={Link} to={config.defaultPath}>
+            <Logo />
+        </ButtonBase>
+    );
+};
 
 export default LogoSection;

src/layout/MainLayout/Sidebar/MenuList/NavCollapse/index.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import { useLocation } from 'react-router';
 
 // material-ui
 import { useTheme } from '@mui/material/styles';
@@ -27,6 +28,35 @@ const NavCollapse = ({ menu, level }) => {
         setSelected(!selected ? menu.id : null);
     };
 
+    const { pathname } = useLocation();
+    const checkOpenForParent = (child, id) => {
+        child.forEach((item) => {
+            if (item.url === pathname) {
+                setOpen(true);
+                setSelected(id);
+            }
+        });
+    };
+
+    // menu collapse for sub-levels
+    useEffect(() => {
+        setOpen(false);
+        setSelected(null);
+        if (menu.children) {
+            menu.children.forEach((item) => {
+                if (item.children?.length) {
+                    checkOpenForParent(item.children, menu.id);
+                }
+                if (item.url === pathname) {
+                    setSelected(menu.id);
+                    setOpen(true);
+                }
+            });
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pathname, menu.children]);
+
     // menu collapse & item
     const menus = menu.children?.map((item) => {
         switch (item.type) {

src/store/customizationReducer.js

@@ -6,6 +6,7 @@ import * as actionTypes from './actions';
 
 export const initialState = {
     isOpen: [], // for active default menu
+    defaultId: 'default',
     fontFamily: config.fontFamily,
     borderRadius: config.borderRadius,
     opened: true