From 0f803dd0e82a86fe39ff897144a1a60a5a7bab70 Mon Sep 17 00:00:00 2001
From: Mehdi Torabi <46302001+mehdi-torabiv@users.noreply.github.com>
Date: Thu, 11 Jul 2024 11:05:26 +0300
Subject: [PATCH] add sidebar (#29)

* add sidebar

* update interface
---
 .eslintrc.cjs                         |  3 +-
 src/components/layouts/SidebarApp.tsx | 56 ++++++++++++++++++++++-----
 src/interfaces/index.ts               | 11 ++++++
 src/libs/constants.ts                 | 25 +++++++++++-
 src/pages/Identifiers/Identifiers.tsx |  3 ++
 src/pages/Identifiers/index.ts        |  3 ++
 src/pages/Permissions/Permissions.tsx |  3 ++
 src/pages/Permissions/index.ts        |  3 ++
 src/router/index.tsx                  | 12 ++++++
 9 files changed, 107 insertions(+), 12 deletions(-)
 create mode 100644 src/interfaces/index.ts
 create mode 100644 src/pages/Identifiers/Identifiers.tsx
 create mode 100644 src/pages/Identifiers/index.ts
 create mode 100644 src/pages/Permissions/Permissions.tsx
 create mode 100644 src/pages/Permissions/index.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 8393e3a..f53e91f 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -26,6 +26,7 @@ module.exports = {
     'import/prefer-default-export': 'warn',
     "import/prefer-default-export": "off",
     "import/order": 'warn',
-    "import/extensions": 'warn'
+    "import/extensions": 'warn',
+    '@typescript-eslint/no-exp': 'off',
   },
 };
\ No newline at end of file
diff --git a/src/components/layouts/SidebarApp.tsx b/src/components/layouts/SidebarApp.tsx
index 0e6f918..32c2a97 100644
--- a/src/components/layouts/SidebarApp.tsx
+++ b/src/components/layouts/SidebarApp.tsx
@@ -1,9 +1,23 @@
-import { Drawer, List, ListItem, ListItemText } from '@mui/material';
-import { DRAWER_WIDTH } from '../../libs/constants';
+import {
+  Drawer,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Box,
+  Toolbar,
+  Divider,
+  Typography,
+} from '@mui/material';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { DRAWER_WIDTH, SIDEBAR_MENU } from '../../libs/constants';
 
 function SidebarApp() {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
   return (
-    <div>
+    <Box display="flex">
       <Drawer
         variant="permanent"
         sx={{
@@ -15,16 +29,38 @@ function SidebarApp() {
           },
         }}
       >
+        <Toolbar>
+          <Box
+            sx={{
+              width: '100%',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Typography variant="h6" fontWeight="bold">
+              LOGO
+            </Typography>
+          </Box>
+        </Toolbar>
+        <Divider />
         <List>
-          <ListItem button>
-            <ListItemText primary="Item 1" />
-          </ListItem>
-          <ListItem button>
-            <ListItemText primary="Item 2" />
-          </ListItem>
+          {SIDEBAR_MENU.map((item) => (
+            <ListItemButton
+              key={item.title}
+              sx={{ display: 'flex', justifyContent: 'center', gap: 1 }}
+              selected={item.path === pathname}
+              onClick={() => navigate(item.path)}
+            >
+              <ListItemIcon sx={{ minWidth: 'auto' }}>
+                <item.icon />
+              </ListItemIcon>
+              <ListItemText>{item.title}</ListItemText>
+            </ListItemButton>
+          ))}
         </List>
       </Drawer>
-    </div>
+    </Box>
   );
 }
 
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
new file mode 100644
index 0000000..47f0f0f
--- /dev/null
+++ b/src/interfaces/index.ts
@@ -0,0 +1,11 @@
+import { SvgIconTypeMap } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+
+export interface MenuItem {
+  title: string;
+  path: string;
+  icon: OverridableComponent<SvgIconTypeMap<NonNullable<unknown>, 'svg'>> & {
+    muiName: string;
+  };
+  children?: MenuItem[];
+}
diff --git a/src/libs/constants.ts b/src/libs/constants.ts
index d2e9b81..7947cbf 100644
--- a/src/libs/constants.ts
+++ b/src/libs/constants.ts
@@ -1 +1,24 @@
-export const DRAWER_WIDTH = 280;
+import SpaceDashboardIcon from '@mui/icons-material/SpaceDashboard';
+import FingerprintIcon from '@mui/icons-material/Fingerprint';
+import BlockIcon from '@mui/icons-material/Block';
+import { MenuItem } from '../interfaces';
+
+export const DRAWER_WIDTH = 240;
+
+export const SIDEBAR_MENU: MenuItem[] = [
+  {
+    title: 'Dashboard',
+    path: '/',
+    icon: SpaceDashboardIcon,
+  },
+  {
+    title: 'Identifiers',
+    path: '/idenifiers',
+    icon: FingerprintIcon,
+  },
+  {
+    title: 'Permissions',
+    path: '/permissions',
+    icon: BlockIcon,
+  },
+];
diff --git a/src/pages/Identifiers/Identifiers.tsx b/src/pages/Identifiers/Identifiers.tsx
new file mode 100644
index 0000000..7a92dcb
--- /dev/null
+++ b/src/pages/Identifiers/Identifiers.tsx
@@ -0,0 +1,3 @@
+export function Identifiers() {
+  return <div>Identifiers</div>;
+}
diff --git a/src/pages/Identifiers/index.ts b/src/pages/Identifiers/index.ts
new file mode 100644
index 0000000..f7c14b8
--- /dev/null
+++ b/src/pages/Identifiers/index.ts
@@ -0,0 +1,3 @@
+import { Identifiers } from './Identifiers';
+
+export default Identifiers;
diff --git a/src/pages/Permissions/Permissions.tsx b/src/pages/Permissions/Permissions.tsx
new file mode 100644
index 0000000..9f37449
--- /dev/null
+++ b/src/pages/Permissions/Permissions.tsx
@@ -0,0 +1,3 @@
+export function Permissions() {
+  return <div>Permissions</div>;
+}
diff --git a/src/pages/Permissions/index.ts b/src/pages/Permissions/index.ts
new file mode 100644
index 0000000..4f8492e
--- /dev/null
+++ b/src/pages/Permissions/index.ts
@@ -0,0 +1,3 @@
+import { Permissions } from './Permissions';
+
+export default Permissions;
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 32c116e..fa24c86 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,5 +1,9 @@
 import { createBrowserRouter } from 'react-router-dom';
+
 import Dashboard from '../pages/Dashboard';
+import Identifiers from '../pages/Identifiers';
+import Permissions from '../pages/Permissions';
+
 import DefaultLayout from '../layouts/DefaultLayout';
 
 export const router = createBrowserRouter([
@@ -12,6 +16,14 @@ export const router = createBrowserRouter([
         element: <Dashboard />,
         index: true,
       },
+      {
+        path: '/idenifiers',
+        element: <Identifiers />,
+      },
+      {
+        path: '/permissions',
+        element: <Permissions />,
+      },
     ],
   },
   {