Added nested button menu popup

Client/src/Components/Sidebar/index.css

@@ -1,4 +1,5 @@
 aside .selected-path,
+.sidebar-popup .selected-path,
 aside .MuiListItemButton-root:hover {
   background-color: var(--env-var-color-13);
 }
@@ -88,4 +89,33 @@ aside {
 }
 aside .MuiList-root {
   transition: padding 100ms ease;
-}
+}
+
+.sidebar-popup .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-popup .MuiList-root {
+  padding: 6px 8px;
+  min-width: 100px;
+}
+.sidebar-popup li.MuiButtonBase-root {
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-5);
+  padding: 5px 8px;
+  border-radius: var(--env-var-radius-1);
+}
+.sidebar-popup li.MuiButtonBase-root:hover{
+  background-color: var(--env-var-color-13);
+}
+.sidebar-popup .MuiModal-root p.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-2);
+}
+.sidebar-popup svg{
+  width: 16px;
+  height: 16px;
+  opacity: 0.9;
+}

Client/src/Components/Sidebar/index.jsx

@@ -9,6 +9,8 @@ import {
   ListItemIcon,
   ListItemText,
   ListSubheader,
+  Menu,
+  MenuItem,
   Stack,
   Tooltip,
   Typography,
@@ -85,6 +87,16 @@ function Sidebar() {
   const authState = useSelector((state) => state.auth);
   const [open, setOpen] = useState({ Dashboard: false, Account: false });
   const [collapsed, setCollapsed] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [popup, setPopup] = useState();
+
+  const openPopup = (event, id) => {
+    setAnchorEl(event.currentTarget);
+    setPopup(id);
+  };
+  const closePopup = () => {
+    setAnchorEl(null);
+  };
 
   /**
    * Handles logging out the user
@@ -183,17 +195,62 @@ function Sidebar() {
               {!collapsed && <ListItemText>{item.name}</ListItemText>}
             </ListItemButton>
           ) : collapsed ? (
-            <ListItemButton
-              key={item.name}
-              sx={{
-                gap: theme.gap.medium,
-                borderRadius: `${theme.shape.borderRadius}px`,
-                justifyContent: collapsed ? "center" : "flex-start",
-              }}
-            >
-              <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-              {!collapsed && <ListItemText>{item.name}</ListItemText>}
-            </ListItemButton>
+            <React.Fragment key={item.name}>
+              <ListItemButton
+                className={popup === item.name ? "selected-path" : ""}
+                onClick={(event) => openPopup(event, item.name)}
+                sx={{
+                  position: "relative",
+                  gap: theme.gap.medium,
+                  borderRadius: `${theme.shape.borderRadius}px`,
+                  justifyContent: collapsed ? "center" : "flex-start",
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
+                {!collapsed && <ListItemText>{item.name}</ListItemText>}
+              </ListItemButton>
+              <Menu
+                className="sidebar-popup"
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl) && popup === item.name}
+                onClose={closePopup}
+                anchorOrigin={{
+                  vertical: "top",
+                  horizontal: "right",
+                }}
+                sx={{ ml: theme.gap.small }}
+              >
+                {item.nested.map((child) => {
+                  if (
+                    child.name === "Team" &&
+                    authState.user?.role &&
+                    !authState.user.role.includes("admin")
+                  ) {
+                    return null;
+                  }
+
+                  return (
+                    <MenuItem
+                      className={
+                        location.pathname.includes(child.path)
+                          ? "selected-path"
+                          : ""
+                      }
+                      key={child.path}
+                      onClick={() => navigate(`/${child.path}`)}
+                      sx={{
+                        gap: theme.gap.small,
+                        borderRadius: `${theme.shape.borderRadius}px`,
+                        pl: theme.gap.small,
+                      }}
+                    >
+                      {child.icon}
+                      {child.name}
+                    </MenuItem>
+                  );
+                })}
+              </Menu>
+            </React.Fragment>
           ) : (
             <React.Fragment key={item.name}>
               <ListItemButton