updates on the dispatch active page and the navbar design

2026-06-08 20:21:36 +05:30
parent bbec0aa910
commit fd27ac92d8
8 changed files with 1261 additions and 434 deletions
--- a/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavCollapse.js
+++ b/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavCollapse.js
@@ -210,10 +210,14 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
  const isSelected = selected === menu.id;
  const borderIcon = level === 1 ? <BorderOutlined style={{ fontSize: '1rem' }} /> : false;
  const Icon = menu.icon;
-  const menuIcon = menu.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} /> : borderIcon;
-  const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && drawerOpen ? theme.palette.text.primary : theme.palette.primary.main;
+  const menuIcon = menu.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem', color: 'white' }} /> : borderIcon;
+  // const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : 'text.primary';
+  // const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && drawerOpen ? theme.palette.text.primary : theme.palette.primary.main;
  const popperId = miniMenuOpened ? `collapse-pop-${menu.id}` : undefined;
  const FlexBox = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' };
+  const textColor = 'white';
+  const iconSelectedColor = 'white';
+  // const isSelected = true;

  return (
    <>
@@ -227,9 +231,11 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
            sx={{
              pl: drawerOpen ? `${level * 28}px` : 1.5,
              py: !drawerOpen && level === 1 ? 1.25 : 1,
+
              ...(drawerOpen && {
                '&:hover': {
-                  bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.light'
+                  // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter'
+                  bgcolor: '#7b1fa2'
                },
                '&.Mui-selected': {
                  bgcolor: 'transparent',
@@ -239,13 +245,14 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
              }),
              ...(!drawerOpen && {
                '&:hover': {
-                  bgcolor: 'primary.light'
+                  bgcolor: 'transparent'
+                  // bgcolor:'#7b1fa2'
                },
                '&.Mui-selected': {
                  '&:hover': {
-                    bgcolor: 'white'
+                    bgcolor: 'transparent'
                  },
-                  bgcolor: 'white'
+                  bgcolor: 'transparent'
                }
              })
            }}
@@ -255,7 +262,10 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
                onClick={handlerIconLink}
                sx={{
                  minWidth: 28,
-                  color: selected === menu.id ? 'primary.main' : 'white',
+                  // color: selected === menu.id ? 'primary.main' : textColor,
+                  // color: selected === menu.id ? textColor : textColor,
+                  // bgcolor:'white',
+                  // color:'white',
                  ...(!drawerOpen && {
                    borderRadius: 1.5,
                    width: 36,
@@ -264,13 +274,17 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
                    justifyContent: 'center',
                    '&:hover': {
                      // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter'
+                      bgcolor: '#7b1fa2',
+                      color: 'white'
                    }
                  }),
                  ...(!drawerOpen &&
                    selected === menu.id && {
-                      // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.900' : 'primary.lighter',
+                      bgcolor: 'primary.light',
+                      color: 'primary.main',
                      '&:hover': {
-                        // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.darker' : 'primary.lighter'
+                        bgcolor: '#7b1fa2',
+                        color: 'primary.main'
                      }
                    })
                }}
@@ -281,7 +295,12 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
            {(drawerOpen || (!drawerOpen && level !== 1)) && (
              <ListItemText
                primary={
-                  <Typography variant="h6" color={selected === menu.id ? 'white' : 'white'}>
+                  <Typography
+                    variant="h6"
+                    // color={selected === menu.id ? 'primary' : textColor}
+                    // color={'white'}
+                    color={selected === menu.id ? textColor : textColor}
+                  >
                    {menu.title}
                  </Typography>
                }
@@ -296,9 +315,22 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
            )}
            {(drawerOpen || (!drawerOpen && level !== 1)) &&
              (miniMenuOpened || open ? (
-                <UpOutlined style={{ fontSize: '0.625rem', marginLeft: 1, color: theme.palette.primary.main }} />
+                <UpOutlined
+                  style={{
+                    fontSize: '0.625rem',
+                    marginLeft: 1,
+                    //  color: theme.palette.primary.main
+                    color: 'white'
+                  }}
+                />
              ) : (
-                <DownOutlined style={{ fontSize: '0.625rem', marginLeft: 1, color: 'white' }} />
+                <DownOutlined
+                  style={{
+                    fontSize: '0.625rem',
+                    marginLeft: 1,
+                    color: 'white'
+                  }}
+                />
              ))}

            {!drawerOpen && (
@@ -328,8 +360,8 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
                        mt: 1.5,
                        boxShadow: theme.customShadows.z1,
                        backgroundImage: 'none',
-                        border: `1px solid ${theme.palette.primary.main}`,
-                        bgcolor: 'primary.main'
+                        border: `2px solid ${theme.palette.primary.main}`,
+                        width: 'auto'
                      }}
                    >
                      <ClickAwayListener onClickAway={handleClose}>
@@ -373,7 +405,14 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
          >
            <Box onClick={handlerIconLink} sx={FlexBox}>
              {menuIcon && (
-                <ListItemIcon sx={{ my: 'auto', minWidth: !menu.icon ? 18 : 36, color: theme.palette.secondary.dark }}>
+                <ListItemIcon
+                  sx={{
+                    my: 'auto',
+                    minWidth: !menu.icon ? 18 : 36
+                    //  color: theme.palette.secondary.dark
+                    // color:'white'
+                  }}
+                >
                  {menuIcon}
                </ListItemIcon>
              )}
@@ -386,7 +425,12 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
              )}
              <ListItemText
                primary={
-                  <Typography variant="body1" color="inherit" sx={{ my: 'auto' }}>
+                  <Typography
+                    variant="body1"
+                    // color="inherit"
+                    // color="white"
+                    sx={{ my: 'auto' }}
+                  >
                    {menu.title}
                  </Typography>
                }
--- a/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavGroup.js
+++ b/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavGroup.js
@@ -26,7 +26,7 @@ import NavCollapse from './NavCollapse';
 import SimpleBar from 'components/third-party/SimpleBar';
 import Transitions from 'components/@extended/Transitions';

-import { MenuOrientation, ThemeMode } from 'config';
+import { MenuOrientation } from 'config';
 import useConfig from 'hooks/useConfig';
 import { dispatch, useSelector } from 'store';
 import { activeID } from 'store/reducers/menu';
@@ -227,9 +227,9 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
            item.title &&
            drawerOpen && (
              <Box sx={{ pl: 3, mb: 1.5 }}>
-                <Typography variant="subtitle2" 
-                // color={theme.palette.mode === ThemeMode.DARK ? 'textSecondary' : 'text.secondary'}
-                sx={{color:'#fff'}}
+                <Typography
+                  variant="subtitle2"
+                  sx={{ color: '#fff' }}
                >
                  {item.title}
                </Typography>
--- a/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.js
+++ b/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.js
@@ -9,9 +9,10 @@ import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography, u

 // project import
 import Dot from 'components/@extended/Dot';
+
 import { MenuOrientation, ThemeMode } from 'config';
 import useConfig from 'hooks/useConfig';
-import { activeItem, openDrawer } from 'store/reducers/menu';
+import { activeItem, openDrawer, setSelectedMenu } from 'store/reducers/menu';

 // ==============================|| NAVIGATION - LIST ITEM ||============================== //

@@ -35,10 +36,15 @@ const NavItem = ({ item, level }) => {
  }

  const Icon = item.icon;
-  const itemIcon = item.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} /> : false;

  const isSelected = openItem.findIndex((id) => id === item.id) > -1;

+  const itemIcon = item.icon ? (
+    <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem', color: isSelected ? '#662582' : '#fff' }} />
+  ) : (
+    false
+  );
+
  // const { pathname } = useLocation();
  const pathname = document.location.pathname;

@@ -59,10 +65,15 @@ const NavItem = ({ item, level }) => {
    if (pathname.includes(item.url)) {
      dispatch(activeItem({ openItem: [item.id] }));
    }
+
    // eslint-disable-next-line
  }, [pathname]);

-  const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : 'text.primary';
+  useEffect(() => {
+    dispatch(setSelectedMenu(pathname));
+  }, [pathname]);
+
+  const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : '#fff';
  const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && drawerOpen ? 'text.primary' : 'primary.main';

  return (
@@ -72,14 +83,16 @@ const NavItem = ({ item, level }) => {
          {...listItemProps}
          disabled={item.disabled}
          selected={isSelected}
+          onClick={() => {
+            // dispatch(setSelectedMenu(item));
+          }}
          sx={{
            zIndex: 1201,
            pl: drawerOpen ? `${level * 28}px` : 1.5,
            py: !drawerOpen && level === 1 ? 1.25 : 1,
            ...(drawerOpen && {
-              // bgcolor: 'primary.light',
              '&:hover': {
-                bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.light'
+                bgcolor: '#7b1fa2'
              },
              '&.Mui-selected': {
                bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter',
@@ -92,41 +105,43 @@ const NavItem = ({ item, level }) => {
              }
            }),
            ...(!drawerOpen && {
+              bgcolor: '#662582',
              '&:hover': {
-                bgcolor: 'primary.light'
+                bgcolor: '#662582'
              },
              '&.Mui-selected': {
                '&:hover': {
-                  bgcolor: 'white'
+                  bgcolor: 'transparent'
                },
-                bgcolor: 'white'
+                bgcolor: 'transparent'
              }
            })
          }}
          {...(downLG && {
-            onClick: () => dispatch(openDrawer(false))
+            onClick: () => {
+              dispatch(openDrawer(false));
+            }
          })}
        >
          {itemIcon && (
            <ListItemIcon
              sx={{
                minWidth: 28,
-                color: isSelected ? iconSelectedColor : 'white',
                ...(!drawerOpen && {
-                  // borderRadius: 1.5,
+                  borderRadius: 1.5,
                  width: 36,
                  height: 36,
                  alignItems: 'center',
-                  justifyContent: 'center'
-                  // '&:hover': {
-                  //   bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'primary.lighter'
-                  // }
+                  justifyContent: 'center',
+                  '&:hover': {
+                    bgcolor: '#7b1fa2'
+                  }
                }),
                ...(!drawerOpen &&
                  isSelected && {
-                    // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.900' : 'primary.lighter',
+                    bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.900' : 'primary.lighter',
                    '&:hover': {
-                      // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.darker' : 'primary.lighter'
+                      bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.darker' : 'primary.lighter'
                    }
                  })
              }}
@@ -137,13 +152,7 @@ const NavItem = ({ item, level }) => {
          {(drawerOpen || (!drawerOpen && level !== 1)) && (
            <ListItemText
              primary={
-                <Typography
-                  variant="h6"
-                  sx={{
-                    ml: 1,
-                    color: isSelected ? theme.palette.primary.main : 'white'
-                  }}
-                >
+                <Typography variant="h6" sx={{ color: isSelected ? iconSelectedColor : textColor, whiteSpace: 'nowrap' }}>
                  {item.title}
                </Typography>
              }
--- a/src/layout/MainLayout/Header/index.js
+++ b/src/layout/MainLayout/Header/index.js
@@ -9,7 +9,7 @@ import AppBarStyled from './AppBarStyled';
 import HeaderContent from './HeaderContent';
 import IconButton from 'components/@extended/IconButton';

-import { MenuOrientation, ThemeMode } from 'config';
+import { MenuOrientation } from 'config';
 import useConfig from 'hooks/useConfig';
 import { dispatch, useSelector } from 'store';
 import { openDrawer } from 'store/reducers/menu';
@@ -32,9 +32,6 @@ const Header = () => {
  // header content
  const headerContent = useMemo(() => <HeaderContent />, []);

-  const iconBackColorOpen = theme.palette.mode === ThemeMode.DARK ? 'grey.200' : 'grey.300';
-  const iconBackColor = theme.palette.mode === ThemeMode.DARK ? 'background.default' : 'grey.100';
-
  // common header
  const mainHeader = (
    <Toolbar>
@@ -43,9 +40,6 @@ const Header = () => {
          aria-label="open drawer"
          onClick={() => dispatch(openDrawer(!drawerOpen))}
          edge="start"
-          // color="secondary"
-          // variant="light"
-          // sx={{ color: 'text.primary', bgcolor: drawerOpen ? iconBackColorOpen : iconBackColor, ml: { xs: 0, lg: -2 } }}
          sx={{
            color: '#fff',
            bgcolor: 'transparent',