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/Sidebar.js
+++ b/src/components/nav/Sidebar.js
@@ -0,0 +1,50 @@
+import { Avatar, Drawer, List, Stack, Toolbar } from "@mui/material";
+
+// import assets from "../../assets";
+import colorConfigs from "../../configs/colorConfigs";
+import sizeConfigs from "../../configs/sizeConfigs";
+import appRoutes from "../../routes/appRoutes";
+import SidebarItem from "./SidebarItem";
+import SidebarItemCollapse from "./SidebarItemCollapse";
+
+const Sidebar = () => {
+  return (
+    <Drawer
+      variant="permanent"
+      sx={{
+        width: sizeConfigs.sidebar.width,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width: sizeConfigs.sidebar.width,
+          boxSizing: "border-box",
+          borderRight: "0px",
+          backgroundColor: colorConfigs.sidebar.bg,
+          color: colorConfigs.sidebar.color
+        }
+      }}
+    >
+      <List disablePadding>
+        <Toolbar sx={{ marginBottom: "20px" }}>
+          <Stack
+            sx={{ width: "100%" }}
+            direction="row"
+            justifyContent="center"
+          >
+            <Avatar src={require('../../smi-logo-120x120.webp')} />
+          </Stack>
+        </Toolbar>
+        {appRoutes.map((route, index) => (
+          route.sidebarProps ? (
+            route.child ? (
+              <SidebarItemCollapse item={route} key={index} />
+            ) : (
+              <SidebarItem item={route} key={index} />
+            )
+          ) : null
+        ))}
+      </List>
+    </Drawer>
+  );
+};
+
+export default Sidebar;