From 8cd61cdcf22e0838e6be43f377631ff70174139a Mon Sep 17 00:00:00 2001
From: ahmadnadeem6236 <ahmadnadeem6236@gmail.com>
Date: Tue, 7 Jan 2025 15:05:32 +0530
Subject: [PATCH 1/4] changes the sidebar

---
 Client/src/Components/Sidebar/index.jsx | 340 ++++++++++++++++++++++--
 1 file changed, 314 insertions(+), 26 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index d5d69838d..77a480bc5 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -55,34 +55,38 @@ const menu = [
 	// { name: "Status pages", path: "status", icon: <StatusPages /> },
 	{ name: "Maintenance", path: "maintenance", icon: <Maintenance /> },
 	// { name: "Integrations", path: "integrations", icon: <Integrations /> },
-	{
-		name: "Account",
-		icon: <Account />,
-		nested: [
-			{ name: "Profile", path: "account/profile", icon: <UserSvg /> },
-			{ name: "Password", path: "account/password", icon: <LockSvg /> },
-			{ name: "Team", path: "account/team", icon: <TeamSvg /> },
-		],
-	},
+	//{
+	//	name: "Account",
+	//	icon: <Account />,
+	//	nested: [
+	//		{ name: "Profile", path: "account/profile", icon: <UserSvg /> },
+	//		{ name: "Password", path: "account/password", icon: <LockSvg /> },
+	//		{ name: "Team", path: "account/team", icon: <TeamSvg /> },
+	//	],
+	//},
 	{
 		name: "Settings",
 		icon: <Settings />,
 		path: "settings",
 	},
+
+	// {
+	// 	name: "Other",
+	// 	icon: <Folder />,
+	// 	nested: [
+	// 	],
+	// },
+];
+
+const subMenu = [
+	{ name: "Support", path: "support", icon: <Support /> },
 	{
-		name: "Other",
-		icon: <Folder />,
-		nested: [
-			{ name: "Support", path: "support", icon: <Support /> },
-			{
-				name: "Discussions",
-				path: "discussions",
-				icon: <ChatBubbleOutlineRoundedIcon />,
-			},
-			{ name: "Docs", path: "docs", icon: <Docs /> },
-			{ name: "Changelog", path: "changelog", icon: <ChangeLog /> },
-		],
+		name: "Discussions",
+		path: "discussions",
+		icon: <ChatBubbleOutlineRoundedIcon />,
 	},
+	{ name: "Docs", path: "docs", icon: <Docs /> },
+	{ name: "Changelog", path: "changelog", icon: <ChangeLog /> },
 ];
 
 /* TODO this could be a key in nested Path would be the link */
@@ -270,11 +274,253 @@ function Sidebar() {
 				}
 				sx={{
 					px: theme.spacing(6),
+					height: "30%",
+				}}
+			>
+				{menu.map((item) =>
+					item.path ? (
+						<Tooltip
+							key={item.path}
+							placement="right"
+							title={collapsed ? item.name : ""}
+							slotProps={{
+								popper: {
+									modifiers: [
+										{
+											name: "offset",
+											options: {
+												offset: [0, -16],
+											},
+										},
+									],
+								},
+							}}
+							disableInteractive
+						>
+							<ListItemButton
+								className={location.pathname.includes(item.path) ? "selected-path" : ""}
+								onClick={() => navigate(`/${item.path}`)}
+								sx={{
+									height: "37px",
+									gap: theme.spacing(4),
+									borderRadius: theme.shape.borderRadius,
+									px: theme.spacing(4),
+								}}
+							>
+								<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
+								<ListItemText>{item.name}</ListItemText>
+							</ListItemButton>
+						</Tooltip>
+					) : collapsed ? (
+						/* TODO Do we ever get here? */
+						<React.Fragment key={item.name}>
+							<Tooltip
+								placement="right"
+								title={collapsed ? item.name : ""}
+								slotProps={{
+									popper: {
+										modifiers: [
+											{
+												name: "offset",
+												options: {
+													offset: [0, -16],
+												},
+											},
+										],
+									},
+								}}
+								disableInteractive
+							>
+								<ListItemButton
+									className={
+										Boolean(anchorEl) && popup === item.name ? "selected-path" : ""
+									}
+									onClick={(event) => openPopup(event, item.name)}
+									sx={{
+										position: "relative",
+										gap: theme.spacing(4),
+										borderRadius: theme.shape.borderRadius,
+										px: theme.spacing(4),
+									}}
+								>
+									<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
+									<ListItemText>{item.name}</ListItemText>
+								</ListItemButton>
+							</Tooltip>
+							{/* <Menu
+								className="sidebar-popup"
+								anchorEl={anchorEl}
+								open={Boolean(anchorEl) && popup === item.name}
+								onClose={closePopup}
+								disableScrollLock
+								anchorOrigin={{
+									vertical: "top",
+									horizontal: "right",
+								}}
+								slotProps={{
+									paper: {
+										sx: {
+											mt: theme.spacing(-2),
+											ml: theme.spacing(1),
+										},
+									},
+								}}
+								MenuListProps={{ sx: { px: 1, py: 2 } }}
+								sx={{
+									ml: theme.spacing(8),
+									"& .selected-path": {
+										backgroundColor: theme.palette.background.accent,
+									},
+								}}
+							>
+								{item.nested.map((child) => {
+									if (
+										child.name === "Team" &&
+										authState.user?.role &&
+										!authState.user.role.includes("superadmin")
+									) {
+										return null;
+									}
+
+									return (
+										<MenuItem
+											className={
+												location.pathname.includes(child.path) ? "selected-path" : ""
+											}
+											key={child.path}
+											onClick={() => {
+												const url = URL_MAP[child.path];
+												if (url) {
+													window.open(url, "_blank", "noreferrer");
+												} else {
+													navigate(`/${child.path}`);
+												}
+												closePopup();
+											}}
+											sx={{
+												gap: theme.spacing(4),
+												opacity: 0.9,
+												"& svg": {
+													"& path": {
+														stroke: theme.palette.other.icon,
+														strokeWidth: 1.1,
+													},
+												},
+											}}
+										>
+											{child.icon}
+											{child.name}
+										</MenuItem>
+									);
+								})}
+							</Menu> */}
+						</React.Fragment>
+					) : (
+						<React.Fragment key={item.name}>
+							<ListItemButton
+								onClick={() =>
+									setOpen((prev) => ({
+										...Object.fromEntries(Object.keys(prev).map((key) => [key, false])),
+										[item.name]: !prev[item.name],
+									}))
+								}
+								sx={{
+									gap: theme.spacing(4),
+									borderRadius: theme.shape.borderRadius,
+									px: theme.spacing(4),
+								}}
+							>
+								<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
+								<ListItemText>{item.name}</ListItemText>
+								{open[`${item.name}`] ? <ArrowUp /> : <ArrowDown />}
+							</ListItemButton>
+							<Collapse
+								in={open[`${item.name}`]}
+								timeout="auto"
+							>
+								{/* <List
+									component="div"
+									disablePadding
+									sx={{ pl: theme.spacing(12) }}
+								>
+									{item.nested.map((child) => {
+										if (
+											child.name === "Team" &&
+											authState.user?.role &&
+											!authState.user.role.includes("superadmin")
+										) {
+											return null;
+										}
+
+										return (
+											<ListItemButton
+												className={
+													location.pathname.includes(child.path) ? "selected-path" : ""
+												}
+												key={child.path}
+												onClick={() => {
+													const url = URL_MAP[child.path];
+													if (url) {
+														window.open(url, "_blank", "noreferrer");
+													} else {
+														navigate(`/${child.path}`);
+													}
+												}}
+												sx={{
+													gap: theme.spacing(4),
+													borderRadius: theme.shape.borderRadius,
+													pl: theme.spacing(4),
+													"&::before": {
+														content: `""`,
+														position: "absolute",
+														top: 0,
+														left: "-7px",
+														height: "100%",
+														borderLeft: 1,
+														borderLeftColor: theme.palette.other.line,
+													},
+													"&:last-child::before": {
+														height: "50%",
+													},
+													"&::after": {
+														content: `""`,
+														position: "absolute",
+														top: "45%",
+														left: "-8px",
+														height: "3px",
+														width: "3px",
+														borderRadius: "50%",
+														backgroundColor: theme.palette.other.line,
+													},
+													"&.selected-path::after": {
+														backgroundColor: theme.palette.text.tertiary,
+														transform: "scale(1.2)",
+													},
+												}}
+											>
+												<ListItemIcon sx={{ minWidth: 0 }}>{child.icon}</ListItemIcon>
+												<ListItemText>{child.name}</ListItemText>
+											</ListItemButton>
+										);
+									})}
+								</List> */}
+							</Collapse>
+						</React.Fragment>
+					)
+				)}
+			</List>
+			<List
+				component="nav"
+				aria-labelledby="nested-menu-subheader"
+				disablePadding
+				sx={{
+					px: theme.spacing(6),
+					pt: theme.spacing(60),
 					height: "100%",
 					overflow: "hidden",
 				}}
 			>
-				{menu.map((item) =>
+				{subMenu.map((item) =>
 					item.path ? (
 						<Tooltip
 							key={item.path}
@@ -344,7 +590,7 @@ function Sidebar() {
 									<ListItemText>{item.name}</ListItemText>
 								</ListItemButton>
 							</Tooltip>
-							<Menu
+							{/* <Menu
 								className="sidebar-popup"
 								anchorEl={anchorEl}
 								open={Boolean(anchorEl) && popup === item.name}
@@ -410,7 +656,7 @@ function Sidebar() {
 										</MenuItem>
 									);
 								})}
-							</Menu>
+							</Menu> */}
 						</React.Fragment>
 					) : (
 						<React.Fragment key={item.name}>
@@ -573,7 +819,7 @@ function Sidebar() {
 										mr: "-8px",
 										"&:focus": { outline: "none" },
 										alignSelf: "center",
-										padding: '10px',
+										padding: "10px",
 
 										"& svg": {
 											width: "22px",
@@ -639,7 +885,49 @@ function Sidebar() {
 						</MenuItem>
 					)}
 					{collapsed && <Divider />}
-					<Divider />
+					<MenuItem
+						onClick={() => navigate("account/profile")}
+						sx={{
+							gap: theme.spacing(4),
+							borderRadius: theme.shape.borderRadius,
+							pl: theme.spacing(4),
+							"& svg path": {
+								stroke: theme.palette.other.icon,
+							},
+						}}
+					>
+						<UserSvg />
+						Profile
+					</MenuItem>
+
+					<MenuItem
+						onClick={() => navigate("account/password")}
+						sx={{
+							gap: theme.spacing(4),
+							borderRadius: theme.shape.borderRadius,
+							pl: theme.spacing(4),
+							"& svg path": {
+								stroke: theme.palette.other.icon,
+							},
+						}}
+					>
+						<LockSvg />
+						Password
+					</MenuItem>
+					<MenuItem
+						onClick={() => navigate("account/team")}
+						sx={{
+							gap: theme.spacing(4),
+							borderRadius: theme.shape.borderRadius,
+							pl: theme.spacing(4),
+							"& svg path": {
+								stroke: theme.palette.other.icon,
+							},
+						}}
+					>
+						<TeamSvg />
+						Team
+					</MenuItem>
 					<MenuItem
 						onClick={logout}
 						sx={{

From 41bc521a7fc03b3707a36bbe65981fe9e45948bd Mon Sep 17 00:00:00 2001
From: ahmadnadeem6236 <ahmadnadeem6236@gmail.com>
Date: Tue, 7 Jan 2025 15:22:58 +0530
Subject: [PATCH 2/4] refactor the code

---
 Client/src/Components/Sidebar/index.jsx | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 77a480bc5..7e7347c8e 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -55,27 +55,11 @@ const menu = [
 	// { name: "Status pages", path: "status", icon: <StatusPages /> },
 	{ name: "Maintenance", path: "maintenance", icon: <Maintenance /> },
 	// { name: "Integrations", path: "integrations", icon: <Integrations /> },
-	//{
-	//	name: "Account",
-	//	icon: <Account />,
-	//	nested: [
-	//		{ name: "Profile", path: "account/profile", icon: <UserSvg /> },
-	//		{ name: "Password", path: "account/password", icon: <LockSvg /> },
-	//		{ name: "Team", path: "account/team", icon: <TeamSvg /> },
-	//	],
-	//},
 	{
 		name: "Settings",
 		icon: <Settings />,
 		path: "settings",
 	},
-
-	// {
-	// 	name: "Other",
-	// 	icon: <Folder />,
-	// 	nested: [
-	// 	],
-	// },
 ];
 
 const subMenu = [

From fe5802cfcf3a57bd7bfa7df8100c592f9d1efd66 Mon Sep 17 00:00:00 2001
From: ahmadnadeem6236 <ahmadnadeem6236@gmail.com>
Date: Tue, 7 Jan 2025 15:40:36 +0530
Subject: [PATCH 3/4] fix the spacing

---
 Client/src/Components/Sidebar/index.jsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 7e7347c8e..7185c382b 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -258,7 +258,7 @@ function Sidebar() {
 				}
 				sx={{
 					px: theme.spacing(6),
-					height: "30%",
+					height: "auto",
 				}}
 			>
 				{menu.map((item) =>
@@ -331,7 +331,7 @@ function Sidebar() {
 									<ListItemText>{item.name}</ListItemText>
 								</ListItemButton>
 							</Tooltip>
-							{/* <Menu
+							<Menu
 								className="sidebar-popup"
 								anchorEl={anchorEl}
 								open={Boolean(anchorEl) && popup === item.name}
@@ -397,7 +397,7 @@ function Sidebar() {
 										</MenuItem>
 									);
 								})}
-							</Menu> */}
+							</Menu>
 						</React.Fragment>
 					) : (
 						<React.Fragment key={item.name}>
@@ -499,8 +499,7 @@ function Sidebar() {
 				disablePadding
 				sx={{
 					px: theme.spacing(6),
-					pt: theme.spacing(60),
-					height: "100%",
+					pt: theme.spacing(35),
 					overflow: "hidden",
 				}}
 			>
@@ -574,7 +573,7 @@ function Sidebar() {
 									<ListItemText>{item.name}</ListItemText>
 								</ListItemButton>
 							</Tooltip>
-							{/* <Menu
+							<Menu
 								className="sidebar-popup"
 								anchorEl={anchorEl}
 								open={Boolean(anchorEl) && popup === item.name}
@@ -640,7 +639,7 @@ function Sidebar() {
 										</MenuItem>
 									);
 								})}
-							</Menu> */}
+							</Menu>
 						</React.Fragment>
 					) : (
 						<React.Fragment key={item.name}>

From 31d9e13686abc32a11b10da056eb9b7678ba8001 Mon Sep 17 00:00:00 2001
From: ahmadnadeem6236 <ahmadnadeem6236@gmail.com>
Date: Thu, 9 Jan 2025 02:01:04 +0530
Subject: [PATCH 4/4] deleted the commented code

---
 Client/src/Components/Sidebar/index.jsx | 69 +------------------------
 1 file changed, 1 insertion(+), 68 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 7185c382b..11019f41d 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -421,74 +421,7 @@ function Sidebar() {
 							<Collapse
 								in={open[`${item.name}`]}
 								timeout="auto"
-							>
-								{/* <List
-									component="div"
-									disablePadding
-									sx={{ pl: theme.spacing(12) }}
-								>
-									{item.nested.map((child) => {
-										if (
-											child.name === "Team" &&
-											authState.user?.role &&
-											!authState.user.role.includes("superadmin")
-										) {
-											return null;
-										}
-
-										return (
-											<ListItemButton
-												className={
-													location.pathname.includes(child.path) ? "selected-path" : ""
-												}
-												key={child.path}
-												onClick={() => {
-													const url = URL_MAP[child.path];
-													if (url) {
-														window.open(url, "_blank", "noreferrer");
-													} else {
-														navigate(`/${child.path}`);
-													}
-												}}
-												sx={{
-													gap: theme.spacing(4),
-													borderRadius: theme.shape.borderRadius,
-													pl: theme.spacing(4),
-													"&::before": {
-														content: `""`,
-														position: "absolute",
-														top: 0,
-														left: "-7px",
-														height: "100%",
-														borderLeft: 1,
-														borderLeftColor: theme.palette.other.line,
-													},
-													"&:last-child::before": {
-														height: "50%",
-													},
-													"&::after": {
-														content: `""`,
-														position: "absolute",
-														top: "45%",
-														left: "-8px",
-														height: "3px",
-														width: "3px",
-														borderRadius: "50%",
-														backgroundColor: theme.palette.other.line,
-													},
-													"&.selected-path::after": {
-														backgroundColor: theme.palette.text.tertiary,
-														transform: "scale(1.2)",
-													},
-												}}
-											>
-												<ListItemIcon sx={{ minWidth: 0 }}>{child.icon}</ListItemIcon>
-												<ListItemText>{child.name}</ListItemText>
-											</ListItemButton>
-										);
-									})}
-								</List> */}
-							</Collapse>
+							></Collapse>
 						</React.Fragment>
 					)
 				)}