adminFront/src/Components/Menu/index.tsx

import * as React from "react";
import { Box } from "@mui/material";
import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined';
import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
import BathtubOutlinedIcon from '@mui/icons-material/BathtubOutlined';
import AddPhotoAlternateOutlinedIcon from '@mui/icons-material/AddPhotoAlternateOutlined';
import NaturePeopleOutlinedIcon from '@mui/icons-material/NaturePeopleOutlined';
import SettingsIcon from '@mui/icons-material/Settings';
import CameraIcon from '@mui/icons-material/Camera';
import HeadsetMicOutlinedIcon from '@mui/icons-material/HeadsetMicOutlined';
import theme from "../../theme";


const Menu: React.FC = () =>  {
  return (
    <React.Fragment>
      <Box sx={{
        backgroundColor: theme.palette.primary.dark,
        width: "96px",
        height: "100vh",
        borderRight: "1px solid #45494c"
      }}>
        <Box sx={{
          width: "100%",
          height: "85px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          cursor: "pointer"
        }}>
            <MenuOutlinedIcon sx={{
              transform: "scale(1.4)"
            }} />
        </Box>

        <Box sx={{
          width: "100%",
          height: "85px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          cursor: "pointer"
        }}>
            <PersonOutlineOutlinedIcon sx={{
              color: theme.palette.info.main,
              transform: "scale(1.2)"
            }} />
        </Box>
        <Box sx={{
          width: "100%",
          height: "85px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          cursor: "pointer"
        }}>
            <SettingsOutlinedIcon sx={{
              color: theme.palette.info.main,
              transform: "scale(1.2)"
            }} />
        </Box>
        <Box sx={{
          width: "100%",
          height: "85px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          cursor: "pointer"
        }}>
            <BathtubOutlinedIcon sx={{
              color: theme.palette.info.main,
              transform: "scale(1.2)"
            }} />
        </Box>
        <Box sx={{
          width: "100%",
          height: "85px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          cursor: "pointer"
        }}>
            <AddPhotoAlternateOutlinedIcon sx={{
              color: theme.palette.info.main,
              transform: "scale(1.2)"
            }} />
        </Box>
        <Box sx={{
          width: "100%",
          height: "85px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          cursor: "pointer"
        }}>
            <NaturePeopleOutlinedIcon sx={{
              color: theme.palette.info.main,
              transform: "scale(1.2)"
            }} />
        </Box>
        <Box sx={{
          width: "100%",
          height: "85px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          cursor: "pointer"
        }}>
            <SettingsIcon sx={{
              color: theme.palette.info.main,
              transform: "scale(1.2)"
            }} />
        </Box>
        <Box sx={{
          width: "100%",
          height: "85px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          cursor: "pointer"
        }}>
            <CameraIcon sx={{
              transform: "scale(1.2)"
            }} />
        </Box>
        <Box sx={{
          width: "100%",
          height: "85px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          cursor: "pointer"
        }}>
            <HeadsetMicOutlinedIcon sx={{
              color: theme.palette.info.main,
              transform: "scale(1.2)"
            }}/>
        </Box>
      </Box>
    </React.Fragment>
  );
}


export default Menu;