add sidebar with redux

- add store - add routes - add page wrapper, mainlayout - add nav folder
2023-08-01 15:38:22 +05:30
parent 75f65e81b4
commit 16b3f521d4
17 changed files with 1058 additions and 9 deletions
--- a/src/components/nav/SidebarItemCollapse.js
+++ b/src/components/nav/SidebarItemCollapse.js
@@ -0,0 +1,66 @@
+import { Collapse, List, ListItemButton, ListItemIcon, ListItemText, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import colorConfigs from "../../configs/colorConfigs";
+import ExpandLessOutlinedIcon from '@mui/icons-material/ExpandLessOutlined';
+import ExpandMoreOutlinedIcon from '@mui/icons-material/ExpandMoreOutlined';
+import SidebarItem from "./SidebarItem";
+import { useSelector } from "react-redux";
+
+const SidebarItemCollapse = ({ item }) => {
+  const [open, setOpen] = useState(false);
+
+  const { appState } = useSelector((state) => state.appState);
+
+  useEffect(() => {
+    if (appState.includes(item.state)) {
+      setOpen(true);
+    }
+  }, [appState, item]);
+
+  return (
+    item.sidebarProps ? (
+      <>
+        <ListItemButton
+          onClick={() => setOpen(!open)}
+          sx={{
+            "&: hover": {
+              backgroundColor: colorConfigs.sidebar.hoverBg
+            },
+            paddingY: "12px",
+            paddingX: "24px"
+          }}
+        >
+          <ListItemIcon sx={{
+            color: colorConfigs.sidebar.color
+          }}>
+            {item.sidebarProps.icon && item.sidebarProps.icon}
+          </ListItemIcon>
+          <ListItemText
+            disableTypography
+            primary={
+              <Typography>
+                {item.sidebarProps.displayText}
+              </Typography>
+            }
+          />
+          {open ? <ExpandLessOutlinedIcon /> : <ExpandMoreOutlinedIcon />}
+        </ListItemButton>
+        <Collapse in={open} timeout="auto">
+          <List>
+            {item.child?.map((route, index) => (
+              route.sidebarProps ? (
+                route.child ? (
+                  <SidebarItemCollapse item={route} key={index} />
+                ) : (
+                  <SidebarItem item={route} key={index} />
+                )
+              ) : null
+            ))}
+          </List>
+        </Collapse>
+      </>
+    ) : null
+  );
+};
+
+export default SidebarItemCollapse;