fix: added logout button

Client/src/Components/Sidebar/index.css

@@ -23,9 +23,13 @@ aside .MuiListSubheader-root {
   opacity: 0.6;
 }
 aside span.MuiTypography-root,
+aside p.MuiTypography-root,
 aside .MuiListSubheader-root {
   color: var(--env-var-color-5);
 }
+aside p.MuiTypography-root {
+  font-size: var(--env-var-font-size-small);
+}
 aside .MuiListItemButton-root:not(.selected-path) > * {
   opacity: 0.9;
 }
@@ -33,7 +37,7 @@ aside .selected-path > * {
   opacity: 1;
 }
 aside .selected-path span.MuiTypography-root {
-  font-weight: 500;
+  font-weight: 600;
 }
 aside .MuiStack-root:last-child {
   margin-top: auto;

Client/src/Components/Sidebar/index.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import {
   Box,
   Collapse,
+  IconButton,
   List,
   ListItemButton,
   ListItemIcon,
@@ -106,7 +107,6 @@ function Sidebar() {
             Menu
           </ListSubheader>
         }
-        sx={{ width: "100%" }}
       >
         {menu.map((item) =>
           item.path ? (
@@ -193,7 +193,6 @@ function Sidebar() {
             Other
           </ListSubheader>
         }
-        sx={{ width: "100%" }}
       >
         {other.map((item) => (
           <ListItemButton
@@ -220,35 +219,31 @@ function Sidebar() {
           </ListItemButton>
         ))}
       </List>
-      <Tooltip
-        title="Open settings"
-        slotProps={{
-          popper: {
-            modifiers: [
-              {
-                name: "offset",
-                options: {
-                  offset: [0, -14],
-                },
-              },
-            ],
-          },
-        }}
+
+      <Stack
+        direction="row"
+        alignItems="center"
+        py={theme.gap.small}
+        px={theme.gap.medium}
+        pr={0}
+        gap={theme.gap.xs}
+        borderRadius={`${theme.shape.borderRadius}px`}
       >
-        <Stack
-          direction="row"
-          alignItems="center"
-          py={theme.gap.small}
-          px={theme.gap.medium}
-          gap={theme.gap.xs}
-          borderRadius={`${theme.shape.borderRadius}px`}
-        >
-          <Avatar small={true} />
-          <Typography component="span" ml={theme.gap.xs}>
+        <Avatar small={true} />
+        <Box ml={theme.gap.xs}>
+          <Typography component="span" fontWeight={500}>
             {authState.user?.firstName} {authState.user?.lastName}
           </Typography>
-        </Stack>
-      </Tooltip>
+          <Typography sx={{ textTransform: "capitalize" }}>
+            {authState.user?.role}
+          </Typography>
+        </Box>
+        <Tooltip title="Log Out">
+          <IconButton sx={{ ml: "auto" }}>
+            <LogoutSvg />
+          </IconButton>
+        </Tooltip>
+      </Stack>
     </Stack>
   );
 }