fix: resolved key prop error

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

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() {
               <ListItemText>{item.name}</ListItemText>
             </ListItemButton>
           ) : (
-            <>
+            <React.Fragment key={item.name}>
               <ListItemButton
-                key={item.name}
                 onClick={() =>
                   setOpen((prev) => ({
                     ...prev,
@@ -149,35 +142,45 @@ function Sidebar() {
                 <ListItemText>{item.name}</ListItemText>
                 {open[`${item.name}`] ? <ArrowUp /> : <ArrowDown />}
               </ListItemButton>
-              <Collapse in={open[`${item.name}`]} timeout="auto" unmountOnExit>
+              <Collapse in={open[`${item.name}`]} timeout="auto">
                 <List
                   component="div"
                   disablePadding
                   sx={{ pl: theme.gap.large }}
                 >
-                  {item.nested.map((child) => (
-                    <ListItemButton
-                      className={
-                        location.pathname.includes(child.path)
-                          ? "selected-path"
-                          : ""
-                      }
-                      key={child.path}
-                      onClick={() => navigate(`/${child.path}`)}
-                      sx={{
-                        gap: theme.gap.medium,
-                        borderRadius: `${theme.shape.borderRadius}px`,
-                      }}
-                    >
-                      <ListItemIcon sx={{ minWidth: 0 }}>
-                        {child.icon}
-                      </ListItemIcon>
-                      <ListItemText>{child.name}</ListItemText>
-                    </ListItemButton>
-                  ))}
+                  {item.nested.map((child) => {
+                    if (
+                      child.name === "Team" &&
+                      authState.user?.role &&
+                      !authState.user.role.includes("admin")
+                    ) {
+                      return null;
+                    }
+
+                    return (
+                      <ListItemButton
+                        className={
+                          location.pathname.includes(child.path)
+                            ? "selected-path"
+                            : ""
+                        }
+                        key={child.path}
+                        onClick={() => navigate(`/${child.path}`)}
+                        sx={{
+                          gap: theme.gap.medium,
+                          borderRadius: `${theme.shape.borderRadius}px`,
+                        }}
+                      >
+                        <ListItemIcon sx={{ minWidth: 0 }}>
+                          {child.icon}
+                        </ListItemIcon>
+                        <ListItemText>{child.name}</ListItemText>
+                      </ListItemButton>
+                    );
+                  })}
                 </List>
               </Collapse>
-            </>
+            </React.Fragment>
           )
         )}
       </List>