add sidebar (#29)

* add sidebar

* update interface

.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',
   },
 };

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>
   );
 }
 

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[];
+}

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,
+  },
+];

src/pages/Identifiers/Identifiers.tsx

@@ -0,0 +1,3 @@
+export function Identifiers() {
+  return <div>Identifiers</div>;
+}

src/pages/Identifiers/index.ts

@@ -0,0 +1,3 @@
+import { Identifiers } from './Identifiers';
+
+export default Identifiers;

src/pages/Permissions/Permissions.tsx

@@ -0,0 +1,3 @@
+export function Permissions() {
+  return <div>Permissions</div>;
+}

src/pages/Permissions/index.ts

@@ -0,0 +1,3 @@
+import { Permissions } from './Permissions';
+
+export default Permissions;

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 />,
+      },
     ],
   },
   {