diff --git a/Client/src/Components/DashboardSettingsIcon/index.css b/Client/src/Components/DashboardSettingsIcon/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/Client/src/Components/DashboardSettingsIcon/index.jsx b/Client/src/Components/DashboardSettingsIcon/index.jsx new file mode 100644 index 000000000..e1f1d59da --- /dev/null +++ b/Client/src/Components/DashboardSettingsIcon/index.jsx @@ -0,0 +1,78 @@ +import { useState } from 'react'; +import Box from '@mui/material/Box'; +import IconButton from '@mui/material/IconButton'; +import Menu from '@mui/material/Menu'; +import Tooltip from '@mui/material/Tooltip'; +import MenuItem from '@mui/material/MenuItem'; +import Typography from '@mui/material/Typography'; +import SvgIcon from '@mui/material/SvgIcon'; +import SettingsIcon from '@mui/icons-material/Settings'; +import { useTheme } from '@mui/material/styles'; + +const settings = ['Open Site', 'Detailed View', 'Incidents', 'Configure', 'Remove']; + +/** + * DashboardSettings component + * + * A component that provides a settings menu accessible from an icon. + * + * @component + * @example + * return ( + * + * ) + */ +function DashboardSettings() { + const theme = useTheme(); + const [anchorElUser, setAnchorElUser] = useState(null); + + /** + * Handles opening the user menu. + * + * @param {React.MouseEvent} event - The event triggered by clicking the user menu button. + */ + const handleOpenUserMenu = (event) => { + setAnchorElUser(event.currentTarget); + }; + + /** + * Handles closing the user menu. + */ + const handleCloseUserMenu = () => { + setAnchorElUser(null); + }; + + return ( + + + + + + + + {settings.map((setting) => ( + + {setting} + + ))} + + + ); +} + +export default DashboardSettings; diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx index bb37d4768..ed1d06fe6 100644 --- a/Client/src/Layouts/HomeLayout/index.jsx +++ b/Client/src/Layouts/HomeLayout/index.jsx @@ -3,6 +3,7 @@ import { Outlet } from 'react-router' import Home from '../../Pages/Home' import './index.css' import ChartsOverviewDemo from '../../Components/DashboardProgressBars' +import DashboardSettings from '../../Components/DashboardSettingsIcon' const HomeLayout = () => { @@ -12,6 +13,7 @@ const HomeLayout = () => { + ) }