diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index 85ba6d226..77136ef88 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -1,6 +1,5 @@
aside .selected-path,
-aside .MuiListItemButton-root:hover,
-aside .MuiStack-root:hover {
+aside .MuiListItemButton-root:hover {
background-color: var(--env-var-color-13);
}
aside .MuiList-root svg {
@@ -28,7 +27,7 @@ aside .MuiListSubheader-root {
color: var(--env-var-color-5);
}
aside .MuiListItemButton-root:not(.selected-path) > * {
- opacity: 0.8;
+ opacity: 0.9;
}
aside .selected-path > * {
opacity: 1;
@@ -39,28 +38,3 @@ aside .selected-path span.MuiTypography-root {
aside .MuiStack-root:last-child {
margin-top: auto;
}
-
-.sidebar-menu {
- margin-top: -20px;
-}
-.sidebar-menu .MuiPaper-root {
- box-shadow: var(--env-var-shadow-1);
- border: solid 1px var(--env-var-color-6);
- border-radius: var(--env-var-radius-1);
- gap: 1px;
-}
-.sidebar-menu .MuiList-root {
- min-width: 100px;
- width: 150px;
-}
-.sidebar-menu li.MuiButtonBase-root {
- min-height: fit-content;
-}
-.sidebar-menu .MuiList-root svg {
- width: 16px;
- height: 16px;
-}
-.sidebar-menu span {
- font-size: var(--env-var-font-size-medium);
- color: var(--env-var-color-2);
-}
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 0de8a31a6..65fedfec1 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
import {
Box,
Collapse,
@@ -81,12 +81,6 @@ function Sidebar() {
const authState = useSelector((state) => state.auth);
const [open, setOpen] = useState({ Dashboard: false, Account: false });
- // Initialize settings and update based on user role
- let settings = ["Profile", "Password", "Team", "Logout"];
- if (authState.user?.role && !authState.user.role.includes("admin")) {
- settings = ["Profile", "Password", "Logout"];
- }
-
/**
* Handles logging out the user
*
@@ -131,9 +125,8 @@ function Sidebar() {
{item.name}
) : (
- <>
+
setOpen((prev) => ({
...prev,
@@ -149,35 +142,45 @@ function Sidebar() {
{item.name}
{open[`${item.name}`] ? : }
-
+
- {item.nested.map((child) => (
- navigate(`/${child.path}`)}
- sx={{
- gap: theme.gap.medium,
- borderRadius: `${theme.shape.borderRadius}px`,
- }}
- >
-
- {child.icon}
-
- {child.name}
-
- ))}
+ {item.nested.map((child) => {
+ if (
+ child.name === "Team" &&
+ authState.user?.role &&
+ !authState.user.role.includes("admin")
+ ) {
+ return null;
+ }
+
+ return (
+ navigate(`/${child.path}`)}
+ sx={{
+ gap: theme.gap.medium,
+ borderRadius: `${theme.shape.borderRadius}px`,
+ }}
+ >
+
+ {child.icon}
+
+ {child.name}
+
+ );
+ })}
- >
+
)
)}