add settings button context menu (nonfunctional parts)

src/components/sidebar/SettingsButton.tsx

@@ -0,0 +1,44 @@
+import { Settings } from "@mui/icons-material";
+import { IconButton, Menu, MenuItem } from "@mui/material";
+import { useState } from "react";
+
+
+
+const SettingsButton: React.FC = () => {
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  
+  return (
+    <div>
+      <IconButton
+        sx={{ position: "absolute", right: 0 }}
+        aria-controls={open ? "context-menu" : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? "true" : undefined}
+        onClick={handleClick}>
+        <Settings />
+      </IconButton>
+      <Menu
+        id="context-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{ "aria-labelledby": "basic-button" }}
+      >
+        <MenuItem onClick={handleClose}>Remove from Favourites</MenuItem>
+        <MenuItem onClick={handleClose}>View current meeting</MenuItem>
+        <MenuItem onClick={handleClose}>View upcoming meetings</MenuItem>
+        <MenuItem onClick={handleClose}>Create meeting</MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+export default SettingsButton;

src/components/sidebar/Sidebar.tsx

@@ -2,7 +2,7 @@ import { Divider, Drawer, List, ListItem, ListSubheader } from "@mui/material";
 import GroupSelect from "./GroupSelect";
 import SidebarUser, { SidebarUserObj } from "./SidebarUser";
 
-// TODO: SidebarUser icon button context menu
+// TODO: toolbar on top of sidebar since it goes under the navbar
 
 const drawerWidth = 240;
 
@@ -24,7 +24,7 @@ const Sidebar: React.FC<Props> = ({ users }: Props) => {
       variant="permanent"
       anchor="right"
     >
-      <List disablePadding sx={{ height: "90%", overflow: "auto" }}>
+      <List disablePadding sx={{ height: "80%", overflow: "auto" }}>
         <ListSubheader disableGutters>
           <GroupSelect />
         </ListSubheader>

src/components/sidebar/SidebarUser.tsx

@@ -1,5 +1,5 @@
-import { Settings } from "@mui/icons-material";
+import { Box, Typography } from "@mui/material";
-import { Box, IconButton, Typography } from "@mui/material";
+import SettingsButton from "./SettingsButton";
 
 export interface SidebarUserObj {
   id: number,
@@ -62,9 +62,7 @@ const SidebarUser: React.FC<Props> = ({ user }: Props) => {
         <Typography variant="h6">{user.name}</Typography>
         <Typography variant="caption">{getMeetingStatusText(user.meetingStatus)}</Typography>
       </Box>
-      <IconButton sx={{ position: "absolute", right: 0 }}>
+      <SettingsButton />
-        <Settings />
-      </IconButton>
     </Box>
   );
 };