Tttt

.prettierignore

@@ -0,0 +1 @@
+node_modules

package.json

@@ -13,7 +13,9 @@
     "lint:fix": "eslint --fix --ext .js,.jsx ./src",
     "clear-all": "rm -rf build node_modules",
     "re-start": "rm -rf build node_modules && yarn install && yarn start",
-    "re-build": "rm -rf build node_modules && yarn install && yarn build"
+    "re-build": "rm -rf build node_modules && yarn install && yarn build",
+    "prettier-watch": "onchange \"**/*\" -- prettier --write --ignore-unknown {{changed}}",
+     "prettier": "prettier --write"
   },
   "eslintConfig": {
     "extends": [
@@ -38,18 +40,20 @@
     ]
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^7.6.0",
     "@iconify/react": "^4.1.0",
+    "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.103",
-    "@mui/material": "^5.11.10",
+    "@mui/material": "^5.13.6",
     "apexcharts": "^3.37.0",
     "change-case": "^4.1.2",
     "date-fns": "^2.29.3",
     "history": "^5.3.0",
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",
+    "onchange": "^7.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.0",
@@ -74,7 +78,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.8.4"
+    "prettier": "^2.8.8"
   },
   "overrides": {
     "nth-check": "2.1.1"

src/_mock/products.js

@@ -26,7 +26,8 @@ const PRODUCT_NAME = [
   'Nike Air Zoom Pegasus 37 Premium',
   'Nike Air Zoom SuperRep',
   'NikeCourt Royale',
-  'Nike React Art3mis',
+  'Nike React Art3mis2',
+  'Nike React Infinity Run Flyknit A.I.R. Chaz Bear2',
   'Nike React Infinity Run Flyknit A.I.R. Chaz Bear',
 ];
 const PRODUCT_COLOR = ['#00AB55', '#000000', '#FFFFFF', '#FFC0CB', '#FF4842', '#1890FF', '#94D82D', '#FFC107'];

src/components/nav-section/NavSection.js

@@ -1,10 +1,13 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import { NavLink as RouterLink } from 'react-router-dom';
 // @mui
-import { Box, List, ListItemText } from '@mui/material';
-//
+import { Box, List, ListItemText,ListItemButton, Collapse,ListItemIcon } from '@mui/material';
+import { ExpandMore,ExpandLess } from '@mui/icons-material';
 import { StyledNavItem, StyledNavItemIcon } from './styles';
 
+
+
 // ----------------------------------------------------------------------
 
 NavSection.propTypes = {
@@ -30,25 +33,49 @@ NavItem.propTypes = {
 };
 
 function NavItem({ item }) {
-  const { title, path, icon, info } = item;
+  const { title, path, icon, child} = item;
+  const [open, setOpen] = React.useState(false);
 
+  const handleClick = () => {
+    setOpen(!open);
+  };
   return (
-    <StyledNavItem
-      component={RouterLink}
-      to={path}
-      sx={{
-        '&.active': {
-          color: 'text.primary',
-          bgcolor: 'action.selected',
-          fontWeight: 'fontWeightBold',
-        },
-      }}
-    >
+  <>
+<StyledNavItem>
+      <ListItemButton onClick={handleClick}>
       <StyledNavItemIcon>{icon && icon}</StyledNavItemIcon>
-
-      <ListItemText disableTypography primary={title} />
-
-      {info && info}
-    </StyledNavItem>
+        <ListItemText  disableTypography primary={title} 
+        component={RouterLink}
+      to={path} />
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItemButton>
+      </StyledNavItem>
+      {child ? 
+      <Collapse in={open} timeout="auto" unmountOnExit sx={{fontFamily:'Public Sans',fontSize:14,color:'#637381'}}>
+    <List component="div" disablePadding>
+    {
+    child.map((item) => (
+      <ListItemButton 
+          component={RouterLink}
+          to={item.path}
+          sx={{
+            '&.active': {
+              color: 'text.primary',
+              bgcolor: 'action.selected',
+              fontWeight: 'fontWeightBold',
+            }
+
+          }}>
+        <ListItemIcon >
+        <StyledNavItemIcon>{item.icon && item.icon}</StyledNavItemIcon>
+        </ListItemIcon>
+        <ListItemText disableTypography primary={item.title}/>
+      </ListItemButton> 
+        ))}
+    </List>
+  </Collapse> : null}
+</>
   );
 }
+
+

src/components/nav-section/styles.js

@@ -17,7 +17,5 @@ export const StyledNavItemIcon = styled(ListItemIcon)({
   width: 22,
   height: 22,
   color: 'inherit',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+
 });

src/components/nav-section/test.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavLink as RouterLink } from 'react-router-dom';
+// @mui
+import { Box, List, ListItemText,ListItemButton, Collapse,ListItemIcon } from '@mui/material';
+import { StarBorder,ExpandMore,ExpandLess } from '@mui/icons-material';
+import { StyledNavItem, StyledNavItemIcon } from './styles';
+
+
+
+// ----------------------------------------------------------------------
+
+NavSection.propTypes = {
+  data: PropTypes.array,
+};
+
+export default function NavSection({ data = [], ...other }) {
+  return (
+    <Box {...other}>
+      <List disablePadding sx={{ p: 1 }}>
+        {data.map((item) => (
+          <NavItem key={item.title} item={item} />
+        ))}
+      </List>
+    </Box>
+  );
+}
+
+
+function NavItem({ item }) {
+  const { title, path, icon,child} = item;
+
+  const [open, setOpen] = React.useState(false);
+
+  const handleClick = () => {
+    setOpen(!open);
+  };
+  return (
+    <StyledNavItem
+    component={RouterLink}
+    to={path}
+    sx={{
+      '&.active': {
+        color: 'text.primary',
+        bgcolor: 'action.selected',
+        fontWeight: 'fontWeightBold',
+      }
+
+    }}>
+      <StyledNavItemIcon>{icon && icon}</StyledNavItemIcon>
+      <ListItemButton onClick={handleClick}>
+      <ListItemText disableTypography primary={title} />
+      {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItemButton>
+
+   {child ? <Collapse in={open} timeout="auto" unmountOnExit>
+    <List component="div" disablePadding>
+    {
+    child.map((item) => (
+      <ListItemButton 
+          component={RouterLink}
+          to={item.path}
+          sx={{
+            '&.active': {
+              color: 'text.primary',
+              bgcolor: 'action.selected',
+              fontWeight: 'fontWeightBold',
+            }
+
+          }}>
+        <ListItemIcon>
+          <StarBorder />
+        </ListItemIcon>
+        <ListItemText disableTypography primary={item.title}/>
+      </ListItemButton> 
+        ))}
+    </List>
+  </Collapse>
+  : null
+}
+    </StyledNavItem>
+
+  );
+}
+
+

src/layouts/dashboard/nav/config.js

@@ -7,34 +7,68 @@ const icon = (name) => <SvgColor src={`/assets/icons/navbar/${name}.svg`} sx={{
 
 const navConfig = [
   {
-    title: 'dashboard',
-    path: '/dashboard/app',
+    title: 'Dashboard',
     icon: icon('ic_analytics'),
+    child: [
+      {
+        title: 'Home',
+        icon: icon('ic_analytics'),
+        path: '/dashboard/app',
+      },
+    ],
   },
   {
-    title: 'user',
+    title: 'User',
     path: '/dashboard/user',
     icon: icon('ic_user'),
+    child: [
+      {
+        title: 'User',
+        icon: icon('ic_user'),
+        path: '/dashboard/user',
+      },
+    ],
   },
-  {
-    title: 'product',
-    path: '/dashboard/products',
-    icon: icon('ic_cart'),
-  },
+  // {
+  //   title: 'product',
+  //   path: '/dashboard/products',
+  //   icon: icon('ic_cart'),
+  // },
   {
     title: 'blog',
     path: '/dashboard/blog',
     icon: icon('ic_blog'),
+    child: [
+      {
+        title: 'Blog',
+        icon: icon('ic_blog'),
+        path: '/dashboard/blog',
+      },
+    ],
   },
   {
     title: 'login',
     path: '/login',
     icon: icon('ic_lock'),
+    child: [
+      {
+        title: 'login',
+        icon: icon('ic_lock'),
+        path: '/login',
+      },
+    ],
   },
   {
     title: 'Not found',
     path: '/404',
     icon: icon('ic_disabled'),
+    child: [
+      {
+        title: 'Not found',
+        icon: icon('ic_disabled'),
+        path: '/404',
+      },
+    ],
   },
 ];
 

src/layouts/dashboard/nav/index.js

@@ -79,29 +79,7 @@ export default function Nav({ openNav, onCloseNav }) {
 
       <Box sx={{ flexGrow: 1 }} />
 
-      <Box sx={{ px: 2.5, pb: 3, mt: 10 }}>
-        <Stack alignItems="center" spacing={3} sx={{ pt: 5, borderRadius: 2, position: 'relative' }}>
-          <Box
-            component="img"
-            src="/assets/illustrations/illustration_avatar.png"
-            sx={{ width: 100, position: 'absolute', top: -50 }}
-          />
-
-          <Box sx={{ textAlign: 'center' }}>
-            <Typography gutterBottom variant="h6">
-              Get more?
-            </Typography>
-
-            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-              From only $69
-            </Typography>
-          </Box>
-
-          <Button href="https://material-ui.com/store/items/minimal-dashboard/" target="_blank" variant="contained">
-            Upgrade to Pro
-          </Button>
-        </Stack>
-      </Box>
+
     </Scrollbar>
   );