add pages users && faults in sidebar

src/App.tsx

@@ -8,6 +8,8 @@ import { ToastContainer } from 'react-toastify';
 
 import Home from './pages/home/Home';
 import Register from './pages/register/Register';
+import Users from './pages/users/Users';
+import Faults from './pages/faults/Faults';
 
 function App() {
   return (
@@ -18,7 +20,8 @@ function App() {
         <Route path={PublicRoutes.HOME} element={<Home />} />
         <Route element={<AuthGuard />}>
           <Route path={PrivateRoutes.DASHBOARD} element={<Dashboard />} />
-          {/* <Route path={PrivateRoutes.FAULTS} element={<Faults />} /> */}
+          <Route path={PrivateRoutes.FAULTS} element={<Faults />} />
+          <Route path={PrivateRoutes.USERS} element={<Users />} />
           <Route path='*' element={<NotFound />} />
         </Route>
         <Route path='*' element={<NotFound />} />

src/components/sidebar/Sidebar.tsx

@@ -6,10 +6,11 @@ import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
+import GroupIcon from '@mui/icons-material/Group';
 import { FC, Fragment, KeyboardEvent, useState } from 'react';
 import MenuIcon from '@mui/icons-material/Menu';
 import GridViewIcon from '@mui/icons-material/GridView';
+import ConstructionIcon from '@mui/icons-material/Construction';
 
 import { Divider } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
@@ -59,7 +60,7 @@ export const Sidebar: FC<SidebarProps> = ({ drawerWidth }) => {
         <Divider />
         <ListItem
           disablePadding
-          onClick={() => navigate('/')}
+          onClick={() => navigate(PrivateRoutes.USERS)}
           sx={{
             '&:hover': {
               backgroundColor: 'rgba(0, 0, 0, 0.08)',
@@ -67,15 +68,42 @@ export const Sidebar: FC<SidebarProps> = ({ drawerWidth }) => {
           }}
         >
           <ListItemButton component='div'>
-            <ListItemIcon>{<InboxIcon />}</ListItemIcon>
+            <ListItemIcon>
+              <GroupIcon color='primary' />
+            </ListItemIcon>
             <ListItemText
               sx={{
                 textTransform: 'capitalize',
+                color: '#90caf9',
               }}
-              primary={'fake menu'}
+              primary={'Users'}
             />
           </ListItemButton>
         </ListItem>
+        <Divider />
+        <ListItem
+          disablePadding
+          onClick={() => navigate(PrivateRoutes.FAULTS)}
+          sx={{
+            '&:hover': {
+              backgroundColor: 'rgba(0, 0, 0, 0.08)',
+            },
+          }}
+        >
+          <ListItemButton component='div'>
+            <ListItemIcon>
+              <ConstructionIcon color='primary' />
+            </ListItemIcon>
+            <ListItemText
+              sx={{
+                textTransform: 'capitalize',
+                color: '#90caf9',
+              }}
+              primary={'Faults'}
+            />
+          </ListItemButton>
+        </ListItem>
+        <Divider />
       </List>
     </Box>
   );

src/pages/faults/Faults.tsx

@@ -0,0 +1,5 @@
+const Faults = () => {
+  return <div>Faults</div>;
+};
+
+export default Faults;

src/pages/users/Users.tsx

@@ -0,0 +1,5 @@
+const Users = () => {
+  return <div>Users</div>;
+};
+
+export default Users;