bulk-email/src/components/MenuContent/index.tsx

import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Stack from "@mui/material/Stack";
import { Link, useLocation } from "react-router-dom";
import { useSelector } from "react-redux";
import { RootState } from "../../redux/store/store";
import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
import ManageAccountsOutlinedIcon from "@mui/icons-material/ManageAccountsOutlined";
import EvStationIcon from "@mui/icons-material/EvStation";
import BookOnlineOutlinedIcon from "@mui/icons-material/BookOnlineOutlined";
import ChecklistSharpIcon from "@mui/icons-material/ChecklistSharp";
import AnalyticsOutlinedIcon from "@mui/icons-material/AnalyticsOutlined";
import PeopleOutlinedIcon from "@mui/icons-material/PeopleOutlined";
type PropType = {
	hidden: boolean;
};

export default function MenuContent({ hidden }: PropType) {
	const location = useLocation();
	const userRole = useSelector(
		(state: RootState) => state.profileReducer.user?.userType
	);

	const baseMenuItems = [
		{
			text: "Dashboard",
			icon: <DashboardOutlinedIcon />,
			url: "/panel/dashboard",
		},
		userRole === "superadmin" && {
			text: "Admins",
			icon: <ManageAccountsOutlinedIcon />,
			url: "/panel/admin-list",
		},
		userRole === "superadmin" && {
			text: "Manager",
			icon: <PeopleOutlinedIcon />,
			url: "/panel/all-managers-list",
		},
		userRole === "superadmin" && {
			text: "User",
			icon: <PeopleOutlinedIcon />,
			url: "/panel/user-list",
		},
		userRole === "superadmin" && {
			text: "Roles",
			icon: <AnalyticsOutlinedIcon />,
			url: "/panel/role-list",
		},
		userRole === "admin" && {
			text: "Users",
			icon: <PeopleOutlinedIcon />,
			url: "/panel/user-list",
		},
		userRole === "admin" && {
			text: "Charging Stations",
			icon: <EvStationIcon />,
			url: "/panel/station-list", // Placeholder for now
		},
		userRole === "admin" && {
			text: "Managers",
			icon: <PeopleOutlinedIcon />,
			url: "/panel/manager-list", // Placeholder for now
		},

		userRole === "admin" && {
			text: "Vehicles",
			icon: <AnalyticsOutlinedIcon />,
			url: "/panel/vehicle-list", // Placeholder for now
		},
		// userRole === "manager" && {
		//  text: "Add Slots",
		//  icon: <ManageAccountsOutlinedIcon />,
		//  url: "/panel/EVslots", // Placeholder for now
		// },
		userRole === "user" && {
			text: "Bookings",
			icon: <BookOnlineOutlinedIcon />,
			url: "/panel/booking-list", // Placeholder for now
		},
		userRole === "manager" && {
			text: "Available Slots",
			icon: <ChecklistSharpIcon />,
			url: "/panel/slot-list", // Placeholder for now
		},
		userRole === "user" && {
			text: "Available Slots",
			icon: <ChecklistSharpIcon />,
			url: "/panel/all-available-slots", // Placeholder for now
		},
		userRole === "user" && {
			text: "Near By Stations",
			icon: <EvStationIcon />,
			url: "/panel/external-station-list", // Placeholder for now
		},
	];

	const filteredMenuItems = baseMenuItems.filter(Boolean);

	return (
		<Stack
			sx={{
				flexGrow: 1,
				p: 1,
				justifyContent: "space-between",
				backgroundColor: "#202020",
			}}
		>
			<List dense>
				{filteredMenuItems.map((item, index) => (
					<ListItem
						key={index}
						disablePadding
						sx={{ display: "block", py: 1, px: 0.9 }}
					>
						<ListItemButton
							component={Link}
							to={item.url}
							selected={item.url === location.pathname}
							sx={{ alignItems: "center", columnGap: 0.5 }}
						>
							<ListItemIcon
								sx={{
									minWidth: "fit-content",
									".MuiSvgIcon-root": {
										fontSize: 24,
										color: "#FFFFFF",
									},
								}}
							>
								{item.icon}
							</ListItemIcon>
							<ListItemText
								sx={{
									display: !hidden ? "none" : "",
									transition: "all 0.5s ease",

									".MuiListItemText-primary": {
										width: "118px",
										height: "19px",
										fontSize: "16px",
										letterSpacing: "0%",
										lineHeight: "100%",
										whiteSpace: "pre",
										color: "#FAFAFA",
										marginTop: "5px",
									},
								}}
								primary={item.text}
							/>
						</ListItemButton>
					</ListItem>
				))}
			</List>
		</Stack>
	);
}