From 7c22663250f2c52b7e1fbb60ac608a6a963bb11a Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 1 Aug 2025 15:31:03 -0700
Subject: [PATCH] remove unused css and old sidebar

---
 client/src/Components/Sidebar/index.css     | 105 ---
 client/src/Components/Sidebar/index_old.jsx | 873 --------------------
 2 files changed, 978 deletions(-)
 delete mode 100644 client/src/Components/Sidebar/index.css
 delete mode 100644 client/src/Components/Sidebar/index_old.jsx

diff --git a/client/src/Components/Sidebar/index.css b/client/src/Components/Sidebar/index.css
deleted file mode 100644
index a14a0f3d6..000000000
--- a/client/src/Components/Sidebar/index.css
+++ /dev/null
@@ -1,105 +0,0 @@
-TODO aside .MuiList-root svg {
-	width: 20px;
-	height: 20px;
-	opacity: 0.9;
-}
-aside span.MuiTypography-root {
-	font-size: var(--env-var-font-size-medium);
-	line-height: 1;
-}
-aside .MuiStack-root + span.MuiTypography-root {
-	font-size: var(--env-var-font-size-medium-plus);
-}
-aside .MuiListSubheader-root {
-	font-size: var(--env-var-font-size-small);
-	font-weight: 500;
-	line-height: 1.5;
-	text-transform: uppercase;
-	margin-bottom: 2px;
-	opacity: 0.6;
-}
-aside p.MuiTypography-root {
-	font-size: var(--env-var-font-size-small);
-	opacity: 0.8;
-}
-aside .MuiListItemButton-root:not(.selected-path) > * {
-	opacity: 0.9;
-}
-aside .selected-path > * {
-	opacity: 1;
-}
-aside .selected-path span.MuiTypography-root {
-	font-weight: 600;
-}
-aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root {
-	position: relative;
-}
-aside .MuiCollapse-wrapperInner .MuiList-root svg,
-aside .MuiList-root .MuiListItemText-root + svg {
-	width: 18px;
-	height: 18px;
-}
-
-.sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root) {
-	padding-bottom: 0;
-}
-.sidebar-popup svg {
-	width: 16px;
-	height: 16px;
-	opacity: 0.9;
-}
-
-/* TRANSITIONS */
-aside {
-	flex: 1;
-	transition: max-width 650ms cubic-bezier(0.36, -0.01, 0, 0.77);
-}
-.home-layout aside.collapsed {
-	max-width: 64px;
-}
-
-aside.expanded .MuiTypography-root,
-aside.expanded p.MuiTypography-root,
-aside.expanded .MuiListItemText-root + svg,
-aside.expanded .MuiAvatar-root + .MuiBox-root + .MuiIconButton-root {
-	visibility: visible;
-	animation: fadeIn 1s ease;
-}
-
-aside.collapsed .MuiTypography-root,
-aside.collapsed p.MuiTypography-root,
-aside.collapsed .MuiListItemText-root + svg,
-aside.collapsed .MuiAvatar-root + .MuiBox-root + .MuiIconButton-root {
-	opacity: 0;
-	visibility: hidden;
-}
-
-aside .MuiListSubheader-root {
-	transition: padding 200ms ease;
-}
-
-.sidebar-delay-fade {
-	opacity: 0;
-	visibility: hidden;
-	transition: opacity 0.3s ease;
-}
-
-aside.expanded.sidebar-ready .sidebar-delay-fade {
-	opacity: 1;
-	visibility: visible;
-}
-
-@keyframes fadeIn {
-	0% {
-		opacity: 0;
-		visibility: hidden;
-	}
-	30% {
-		opacity: 0;
-		visibility: hidden;
-	}
-	100% {
-		opacity: 0.9;
-		visibility: visible;
-	}
-}
diff --git a/client/src/Components/Sidebar/index_old.jsx b/client/src/Components/Sidebar/index_old.jsx
deleted file mode 100644
index 219ceff1e..000000000
--- a/client/src/Components/Sidebar/index_old.jsx
+++ /dev/null
@@ -1,873 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-import {
-	Box,
-	Collapse,
-	Divider,
-	IconButton,
-	List,
-	ListItemButton,
-	ListItemIcon,
-	ListItemText,
-	Menu,
-	MenuItem,
-	Stack,
-	Tooltip,
-	Typography,
-} from "@mui/material";
-import ThemeSwitch from "../ThemeSwitch";
-import Avatar from "../Avatar";
-import StarPrompt from "../StarPrompt";
-import LockSvg from "../../assets/icons/lock.svg?react";
-import UserSvg from "../../assets/icons/user.svg?react";
-import TeamSvg from "../../assets/icons/user-two.svg?react";
-import LogoutSvg from "../../assets/icons/logout.svg?react";
-import Support from "../../assets/icons/support.svg?react";
-import Maintenance from "../../assets/icons/maintenance.svg?react";
-import Monitors from "../../assets/icons/monitors.svg?react";
-import Incidents from "../../assets/icons/incidents.svg?react";
-import Integrations from "../../assets/icons/integrations.svg?react";
-import PageSpeed from "../../assets/icons/page-speed.svg?react";
-import Settings from "../../assets/icons/settings.svg?react";
-import ArrowDown from "../../assets/icons/down-arrow.svg?react";
-import ArrowUp from "../../assets/icons/up-arrow.svg?react";
-import ArrowRight from "../../assets/icons/right-arrow.svg?react";
-import ArrowLeft from "../../assets/icons/left-arrow.svg?react";
-import DotsVertical from "../../assets/icons/dots-vertical.svg?react";
-import ChangeLog from "../../assets/icons/changeLog.svg?react";
-import Docs from "../../assets/icons/docs.svg?react";
-import StatusPages from "../../assets/icons/status-pages.svg?react";
-import Discussions from "../../assets/icons/discussions.svg?react";
-import Notifications from "../../assets/icons/notifications.svg?react";
-import Logs from "../../assets/icons/logs.svg?react";
-
-import "./index.css";
-
-// Utils
-import { useLocation, useNavigate } from "react-router";
-import { useTheme } from "@emotion/react";
-import { useDispatch, useSelector } from "react-redux";
-import { useTranslation } from "react-i18next";
-import { clearAuthState } from "../../Features/Auth/authSlice";
-import { toggleSidebar } from "../../Features/UI/uiSlice";
-import { TurnedIn } from "@mui/icons-material";
-import { rules } from "eslint-plugin-react-refresh";
-
-const getMenu = (t) => [
-	{ name: t("menu.uptime"), path: "uptime", icon: <Monitors /> },
-	{ name: t("menu.pagespeed"), path: "pagespeed", icon: <PageSpeed /> },
-
-	{ name: t("menu.infrastructure"), path: "infrastructure", icon: <Integrations /> },
-	{
-		name: t("menu.notifications"),
-		path: "notifications",
-		icon: <Notifications />,
-	},
-	{ name: t("menu.incidents"), path: "incidents", icon: <Incidents /> },
-
-	{ name: t("menu.statusPages"), path: "status", icon: <StatusPages /> },
-	{ name: t("menu.maintenance"), path: "maintenance", icon: <Maintenance /> },
-	{ name: t("menu.logs"), path: "logs", icon: <Logs /> },
-
-	{
-		name: t("menu.settings"),
-		icon: <Settings />,
-		path: "settings",
-	},
-];
-
-const getOtherMenuItems = (t) => [
-	{ name: t("menu.support"), path: "support", icon: <Support /> },
-	{
-		name: t("menu.discussions"),
-		path: "discussions",
-		icon: <Discussions />,
-	},
-	{ name: t("menu.docs"), path: "docs", icon: <Docs /> },
-	{ name: t("menu.changelog"), path: "changelog", icon: <ChangeLog /> },
-];
-
-const getAccountMenuItems = (t) => [
-	{ name: t("menu.profile"), path: "account/profile", icon: <UserSvg /> },
-	{ name: t("menu.password"), path: "account/password", icon: <LockSvg /> },
-	{ name: t("menu.team"), path: "account/team", icon: <TeamSvg /> },
-];
-
-/* TODO this could be a key in nested Path would be the link */
-const URL_MAP = {
-	support: "https://discord.com/invite/NAb6H3UTjK",
-	discussions: "https://github.com/bluewave-labs/checkmate/discussions",
-	docs: "https://bluewavelabs.gitbook.io/checkmate",
-	changelog: "https://github.com/bluewave-labs/checkmate/releases",
-};
-
-const PATH_MAP = {
-	monitors: "Dashboard",
-	pagespeed: "Dashboard",
-	infrastructure: "Dashboard",
-	account: "Account",
-	settings: "Settings",
-};
-
-/**
- * @component
- * Sidebar component serves as a sidebar containing a menu.
- *
- * @returns {JSX.Element} The JSX element representing the Sidebar component.
- */
-
-function Sidebar() {
-	const theme = useTheme();
-	const navigate = useNavigate();
-	const location = useLocation();
-	const dispatch = useDispatch();
-	const { t } = useTranslation();
-	const authState = useSelector((state) => state.auth);
-
-	const otherMenuItems = getOtherMenuItems(t);
-	const accountMenuItems = getAccountMenuItems(t);
-	const collapsed = useSelector((state) => state.ui.sidebar.collapsed);
-	const [open, setOpen] = useState({ Dashboard: false, Account: false, Other: false });
-	const [anchorEl, setAnchorEl] = useState(null);
-	const [popup, setPopup] = useState();
-	const { user } = useSelector((state) => state.auth);
-
-	const sidebarRef = useRef(null);
-	const [sidebarReady, setSidebarReady] = useState(false);
-	const TRANSITION_DURATION = 200;
-	let menu = getMenu(t);
-	menu = menu.filter((item) => {
-		if (item.path === "logs") {
-			return user.role?.includes("admin") || user.role?.includes("superadmin");
-		}
-		return true;
-	});
-
-	useEffect(() => {
-		if (!collapsed) {
-			setSidebarReady(false);
-			const timeout = setTimeout(() => {
-				setSidebarReady(true);
-			}, TRANSITION_DURATION);
-			return () => clearTimeout(timeout);
-		} else {
-			setSidebarReady(false);
-		}
-	}, [collapsed]);
-
-	const renderAccountMenuItems = () => {
-		let filteredAccountMenuItems = [...accountMenuItems];
-
-		// If the user is in demo mode, remove the "Password" option
-		if (user.role?.includes("demo")) {
-			filteredAccountMenuItems = filteredAccountMenuItems.filter(
-				(item) => item.name !== "Password"
-			);
-		}
-
-		// If the user is NOT a superadmin, remove the "Team" option
-		if (user.role && !user.role.includes("superadmin")) {
-			filteredAccountMenuItems = filteredAccountMenuItems.filter(
-				(item) => item.name !== "Team"
-			);
-		}
-
-		return filteredAccountMenuItems.map((item) => (
-			<MenuItem
-				key={item.name}
-				onClick={() => {
-					closePopup();
-					navigate(item.path);
-				}}
-				sx={{
-					gap: theme.spacing(2),
-					borderRadius: theme.shape.borderRadius,
-					pl: theme.spacing(4),
-				}}
-			>
-				{item.icon}
-				{item.name}
-			</MenuItem>
-		));
-	};
-
-	const openPopup = (event, id) => {
-		setAnchorEl(event.currentTarget);
-		setPopup(id);
-	};
-	const closePopup = () => {
-		setAnchorEl(null);
-	};
-
-	/**
-	 * Handles logging out the user
-	 *
-	 */
-	const logout = async () => {
-		// Clear auth state
-		dispatch(clearAuthState());
-		navigate("/login");
-	};
-
-	useEffect(() => {
-		const matchedKey = Object.keys(PATH_MAP).find((key) =>
-			location.pathname.includes(key)
-		);
-
-		if (matchedKey) {
-			setOpen((prev) => ({ ...prev, [PATH_MAP[matchedKey]]: true }));
-		}
-	}, [location]);
-
-	const iconColor = theme.palette.primary.contrastTextTertiary;
-	const sidebarClassName = `${collapsed ? "collapsed" : "expanded"} ${sidebarReady ? "sidebar-ready" : ""}`;
-
-	/* TODO refactor this, there are a some ternaries and comments in the return  */
-	return (
-		<Stack
-			component="aside"
-			ref={sidebarRef}
-			className={sidebarClassName}
-			/* TODO general padding should be here */
-			py={theme.spacing(6)}
-			gap={theme.spacing(6)}
-			/* TODO set all style in this sx if possible (when general)
-			This is the top lever for styles
-			*/
-			sx={{
-				position: "relative",
-				borderRight: `1px solid ${theme.palette.primary.lowContrast}`,
-				borderColor: theme.palette.primary.lowContrast,
-				borderRadius: 0,
-				"& :is(p, span, .MuiListSubheader-root)": {
-					/* 
-					Text color for unselected menu items and menu headings
-					Secondary contrast text against main background
-					*/
-					color: theme.palette.primary.contrastTextSecondary,
-				},
-				"& .MuiList-root svg path": {
-					/* Menu Icons */
-					stroke: iconColor,
-				},
-				"& .selected-path": {
-					/* Selected menu item */
-					backgroundColor: theme.palette.secondary.main,
-					"&:hover": {
-						backgroundColor: theme.palette.secondary.main,
-					},
-					"& .MuiListItemIcon-root svg path": {
-						/* Selected menu item icon */
-						stroke: theme.palette.secondary.contrastText,
-					},
-					"& .MuiListItemText-root :is(p, span)": {
-						/* Selected menu item text */
-						color: theme.palette.secondary.contrastText,
-					},
-				},
-				"& .MuiListItemButton-root:not(.selected-path)": {
-					transition: "background-color .3s",
-					" &:hover": {
-						/* Hovered menu item bg color */
-						backgroundColor: theme.palette.tertiary.main,
-						"& :is(p, span)": {
-							/* Hovered menu item text color */
-							color: theme.palette.tertiary.contrastText,
-						},
-					},
-				},
-			}}
-		>
-			<IconButton
-				sx={{
-					position: "absolute",
-					/* TODO 60 is a magic number. if logo chnges size this might break */
-					top: 60,
-					right: 0,
-					transform: `translate(50%, 0)`,
-					backgroundColor: theme.palette.tertiary.main,
-					border: 1,
-					borderColor: theme.palette.primary.lowContrast,
-					p: theme.spacing(2.5),
-					"& svg": {
-						width: theme.spacing(8),
-						height: theme.spacing(8),
-						"& path": {
-							/* TODO this should be set at the top level if possible */
-							stroke: theme.palette.primary.contrastTextSecondary,
-						},
-					},
-					"&:focus": { outline: "none" },
-					"&:hover": {
-						backgroundColor: theme.palette.primary.lowContrast,
-						borderColor: theme.palette.primary.lowContrast,
-					},
-				}}
-				onClick={() => {
-					setOpen((prev) =>
-						Object.fromEntries(Object.keys(prev).map((key) => [key, false]))
-					);
-					dispatch(toggleSidebar());
-				}}
-			>
-				{collapsed ? <ArrowRight /> : <ArrowLeft />}
-			</IconButton>
-			{/* TODO Alignment done using padding. Use single source of truth to that*/}
-			<Stack
-				pt={theme.spacing(6)}
-				pb={theme.spacing(12)}
-				pl={theme.spacing(8)}
-			>
-				{/* TODO Abstract logo into component */}
-				{/* TODO Turn logo into a link */}
-				<Stack
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(4)}
-					onClick={() => navigate("/")}
-					sx={{ cursor: "pointer" }}
-				>
-					<Stack
-						justifyContent="center"
-						alignItems="center"
-						minWidth={theme.spacing(16)}
-						minHeight={theme.spacing(16)}
-						pl="1px"
-						fontSize={18}
-						color={theme.palette.accent.contrastText}
-						sx={{
-							position: "relative",
-							backgroundColor: theme.palette.accent.main,
-							color: theme.palette.accent.contrastText,
-							borderRadius: theme.shape.borderRadius,
-							userSelect: "none",
-						}}
-					>
-						C
-					</Stack>
-					<Typography
-						component="span"
-						mt={theme.spacing(2)}
-						sx={{ opacity: 0.8, fontWeight: 500 }}
-					>
-						{t("common.appName")}
-					</Typography>
-				</Stack>
-			</Stack>
-			<Box
-				sx={{
-					flexGrow: 1,
-					overflow: "auto",
-					overflowX: "hidden",
-					"&::-webkit-scrollbar": {
-						width: theme.spacing(2),
-					},
-					"&::-webkit-scrollbar-thumb": {
-						backgroundColor: theme.palette.primary.lowContrast,
-						borderRadius: theme.spacing(4),
-					},
-				}}
-			>
-				<List
-					component="nav"
-					aria-labelledby="nested-menu-subheader"
-					disablePadding
-					sx={{
-						px: theme.spacing(6),
-						height: "100%",
-						/* overflow: "hidden", */
-					}}
-				>
-					{menu.map((item) => {
-						return item.path ? (
-							/* If item has a 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.startsWith(`/${item.path}`) ? "selected-path" : ""
-									}
-									onClick={() => navigate(`/${item.path}`)}
-									sx={{
-										height: "37px",
-										gap: theme.spacing(4),
-										borderRadius: theme.shape.borderRadius,
-										px: theme.spacing(4),
-										pl: theme.spacing(5),
-									}}
-								>
-									<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-									<ListItemText>{item.name}</ListItemText>
-								</ListItemButton>
-							</Tooltip>
-						) : collapsed ? (
-							/* TODO Do we ever get here? If item does not have a path and collapsed state is true  */
-							<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),
-										/* TODO what is this selection? */
-										"& .selected-path": {
-											backgroundColor: theme.palette.tertiary.main,
-										},
-									}}
-								>
-									{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,
-													/* TODO this has no effect? */
-													"& svg": {
-														"& path": {
-															stroke: theme.palette.primary.contrastTextTertiary,
-															strokeWidth: 1.1,
-														},
-													},
-												}}
-											>
-												{child.icon}
-												{child.name}
-											</MenuItem>
-										);
-									})}
-								</Menu>
-							</React.Fragment>
-						) : (
-							/* TODO Do we ever get here? If item does not have a path and collapsed state is false */
-							<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.primary.lowContrast,
-														},
-														"&:last-child::before": {
-															height: "50%",
-														},
-														"&::after": {
-															content: `""`,
-															position: "absolute",
-															top: "45%",
-															left: "-8px",
-															height: "3px",
-															width: "3px",
-															borderRadius: "50%",
-															backgroundColor: theme.palette.primary.lowContrast,
-														},
-														"&.selected-path::after": {
-															/* TODO what is this selector doing? */
-															backgroundColor: theme.palette.primary.contrastTextTertiary,
-															transform: "scale(1.2)",
-														},
-													}}
-												>
-													<ListItemIcon sx={{ minWidth: 0 }}>{child.icon}</ListItemIcon>
-													<ListItemText>{child.name}</ListItemText>
-												</ListItemButton>
-											);
-										})}
-									</List>
-								</Collapse>
-							</React.Fragment>
-						);
-					})}
-				</List>
-			</Box>
-
-			{!collapsed && <StarPrompt />}
-
-			<List
-				component="nav"
-				disablePadding
-				sx={{ px: theme.spacing(6) }}
-			>
-				{otherMenuItems.map((item) => {
-					return 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.startsWith(`/${item.path}`) ? "selected-path" : ""
-								}
-								onClick={() => {
-									const url = URL_MAP[item.path];
-									if (url) {
-										window.open(url, "_blank", "noreferrer");
-									} else {
-										navigate(`/${item.path}`);
-									}
-								}}
-								sx={{
-									height: "37px",
-									gap: theme.spacing(4),
-									borderRadius: theme.shape.borderRadius,
-									px: theme.spacing(4),
-									pl: theme.spacing(5),
-								}}
-							>
-								<ListItemIcon sx={{ minWidth: 0 }}>{item.icon} </ListItemIcon>
-								<ListItemText>{item.name} </ListItemText>{" "}
-							</ListItemButton>
-						</Tooltip>
-					) : null;
-				})}
-			</List>
-			<Divider sx={{ mt: "auto", borderColor: theme.palette.primary.lowContrast }} />
-			<Stack
-				direction="row"
-				height="50px"
-				alignItems="center"
-				py={theme.spacing(4)}
-				px={theme.spacing(8)}
-				gap={theme.spacing(2)}
-				borderRadius={theme.shape.borderRadius}
-			>
-				{collapsed ? (
-					<>
-						<Tooltip
-							title="Options"
-							slotProps={{
-								popper: {
-									modifiers: [
-										{
-											name: "offset",
-											options: {
-												offset: [0, -10],
-											},
-										},
-									],
-								},
-							}}
-							disableInteractive
-						>
-							<IconButton
-								onClick={(event) => openPopup(event, "logout")}
-								sx={{ p: 0, "&:focus": { outline: "none" } }}
-							>
-								<Avatar small={true} />
-							</IconButton>
-						</Tooltip>
-					</>
-				) : (
-					<>
-						<Avatar small={true} />
-						<Box
-							ml={theme.spacing(2)}
-							sx={{ maxWidth: "50%", overflow: "hidden" }}
-						>
-							<Typography
-								component="span"
-								fontWeight={500}
-								sx={{
-									display: "block",
-									whiteSpace: "nowrap",
-									overflow: "hidden",
-									textOverflow: "ellipsis",
-								}}
-							>
-								{authState.user?.firstName} {authState.user?.lastName}
-							</Typography>
-							<Typography sx={{ textTransform: "capitalize" }}>
-								{authState.user?.role?.includes("superadmin")
-									? t("roles.superAdmin")
-									: authState.user?.role?.includes("admin")
-										? t("roles.admin")
-										: authState.user?.role?.includes("user")
-											? t("roles.teamMember")
-											: authState.user?.role?.includes("demo")
-												? t("roles.demoUser")
-												: authState.user?.role}
-							</Typography>
-						</Box>
-						<Stack
-							className="sidebar-delay-fade"
-							flexDirection={"row"}
-							marginLeft={"auto"}
-							columnGap={theme.spacing(2)}
-						>
-							<ThemeSwitch color={iconColor} />
-							<Tooltip
-								title={t("navControls")}
-								disableInteractive
-							>
-								<IconButton
-									sx={{
-										ml: "auto",
-										mr: "-8px",
-										"&:focus": { outline: "none" },
-										alignSelf: "center",
-										padding: "10px",
-
-										"& svg": {
-											width: "22px",
-											height: "22px",
-										},
-										"& svg path": {
-											/* Vertical three dots */
-											stroke: iconColor,
-										},
-									}}
-									onClick={(event) => openPopup(event, "logout")}
-								>
-									<DotsVertical />
-								</IconButton>
-							</Tooltip>
-						</Stack>
-					</>
-				)}
-				<Menu
-					className="sidebar-popup"
-					anchorEl={anchorEl}
-					open={Boolean(anchorEl) && popup === "logout"}
-					onClose={closePopup}
-					disableScrollLock
-					anchorOrigin={{
-						vertical: "top",
-						horizontal: "right",
-					}}
-					slotProps={{
-						paper: {
-							sx: {
-								marginTop: theme.spacing(-4),
-								marginLeft: collapsed ? theme.spacing(2) : 0,
-							},
-						},
-					}}
-					MenuListProps={{
-						sx: {
-							p: 2,
-							"& li": { m: 0 },
-							"& li:has(.MuiBox-root):hover": {
-								backgroundColor: "transparent",
-							},
-						},
-					}}
-					sx={{
-						ml: theme.spacing(4),
-					}}
-				>
-					{collapsed && (
-						<MenuItem sx={{ cursor: "default", minWidth: "50%" }}>
-							<Box
-								mb={theme.spacing(2)}
-								sx={{
-									minWidth: "50%",
-									maxWidth: "max-content",
-									overflow: "visible",
-									whiteSpace: "nowrap",
-								}}
-							>
-								<Typography
-									component="span"
-									fontWeight={500}
-									fontSize={13}
-									sx={{
-										display: "block",
-										whiteSpace: "nowrap",
-										overflow: "visible",
-										// wordBreak: "break-word",
-										textOverflow: "clip",
-									}}
-								>
-									{authState.user?.firstName} {authState.user?.lastName}
-								</Typography>
-								<Typography
-									sx={{
-										textTransform: "capitalize",
-										fontSize: 12,
-										whiteSpace: "nowrap",
-										overflow: "visible",
-										// wordBreak: "break-word",
-									}}
-								>
-									{authState.user?.role}
-								</Typography>
-							</Box>
-						</MenuItem>
-					)}
-					{/* TODO Do we need two dividers? */}
-					{collapsed && <Divider />}
-					{/* <Divider /> */}
-					{renderAccountMenuItems()}
-					<MenuItem
-						onClick={logout}
-						sx={{
-							gap: theme.spacing(4),
-							borderRadius: theme.shape.borderRadius,
-							pl: theme.spacing(4),
-							"& svg path": {
-								stroke: iconColor,
-							},
-						}}
-					>
-						<LogoutSvg />
-						{t("menu.logOut", "Log out")}
-					</MenuItem>
-				</Menu>
-			</Stack>
-		</Stack>
-	);
-}
-
-export default Sidebar;