Merge branch 'master' into feat/check-routes

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 (
+ *   <DashboardSettings />
+ * )
+ */
+function DashboardSettings() {
+  const theme = useTheme();
+  const [anchorElUser, setAnchorElUser] = useState(null);
+
+  /**
+   * Handles opening the user menu.
+   *
+   * @param {React.MouseEvent<HTMLElement>} 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 (
+    <Box sx={{ flexGrow: 0 }}>
+      <Tooltip title="Open settings">
+        <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+          <SvgIcon component={SettingsIcon} />
+        </IconButton>
+      </Tooltip>
+      <Menu
+        sx={{ mt: theme.spacing(5.5) }}
+        id="menu-appbar"
+        anchorEl={anchorElUser}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        open={Boolean(anchorElUser)}
+        onClose={handleCloseUserMenu}
+      >
+        {settings.map((setting) => (
+          <MenuItem key={setting} onClick={handleCloseUserMenu}>
+            <Typography textAlign="center">{setting}</Typography>
+          </MenuItem>
+        ))}
+      </Menu>
+    </Box>
+  );
+}
+
+export default DashboardSettings;

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 = () => {
             <Home />
             <Outlet />
             <ChartsOverviewDemo />
+            <DashboardSettings />
         </>
     )
 }