complete most of the non-functional sidebar components

src/components/sidebar/GroupSelect.tsx

@@ -1,7 +1,39 @@
+import { FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, Typography } from "@mui/material";
+import { useState } from "react";
+
+// TODO: change MenuItem values to something meaningful
 
 const GroupSelect: React.FC = () => {
+
+  const [group, setGroup] = useState("");
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setGroup(event.target.value);
+  };
+
   return (
-    <div>GroupSelect</div>
+    <FormControl variant="filled" fullWidth>
+      <InputLabel id="group-select-label">
+        <Typography color="black">Group</Typography>
+      </InputLabel>
+      <Select
+        labelId="group-select-label"
+        id="group-select"
+        value={group}
+        label="Group"
+        onChange={handleChange}
+      >
+        <MenuItem value={0}>
+          <Typography color="black">Favourites</Typography>
+        </MenuItem>
+        <MenuItem value={1}>
+          <Typography color="black">Contacts</Typography>
+        </MenuItem>
+        <MenuItem value={2}>
+          <Typography color="black">Office</Typography>
+        </MenuItem>
+      </Select>
+    </FormControl>
   );
 };
 

src/components/sidebar/Sidebar.tsx

@@ -1,19 +1,41 @@
-import { Box } from "@mui/material";
+import { Divider, Drawer, List, ListItem, ListSubheader } from "@mui/material";
+import GroupSelect from "./GroupSelect";
 import SidebarUser, { SidebarUserObj } from "./SidebarUser";
 
+// TODO: SidebarUser icon button context menu
+
+const drawerWidth = 240;
+
 interface Props {
   users: SidebarUserObj[],
 }
 
 const Sidebar: React.FC<Props> = ({ users }: Props) => {
   return (
-    <Box>
-      {users.map((user) => (
-        <div key={user.id}>
-          <SidebarUser user={user} />
-        </div>
-      ))}
-    </Box>
+    <Drawer
+      sx={{
+        width: drawerWidth,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width: drawerWidth,
+          boxSizing: "border-box",
+        },
+      }}
+      variant="permanent"
+      anchor="right"
+    >
+      <List disablePadding sx={{ height: "90%", overflow: "auto" }}>
+        <ListSubheader disableGutters>
+          <GroupSelect />
+        </ListSubheader>
+        {users.map((user) => (
+          <ListItem disablePadding key={user.id}>
+            <SidebarUser user={user} /> 
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+    </Drawer>
   );
 };
 

src/components/sidebar/SidebarUser.tsx

@@ -1,4 +1,5 @@
-import { Box } from "@mui/material";
+import { Settings } from "@mui/icons-material";
+import { Box, IconButton, Typography } from "@mui/material";
 
 export interface SidebarUserObj {
   id: number,
@@ -42,7 +43,7 @@ const getStatusColor = (ms: MeetingStatus): string => {
       return "#ff7070";
     }
     case MeetingStatus.IN_MEETING: {
-      return "#baba34";
+      return "#e8da46";
     }
   }
 };
@@ -53,10 +54,17 @@ interface Props {
 
 const SidebarUser: React.FC<Props> = ({ user }: Props) => {
   return (
-    <Box>
-      {user.name}
-      {getStatusColor(user.meetingStatus)}
-      {getMeetingStatusText(user.meetingStatus)}
+    <Box sx={{ display: "flex", flexDirection: "row", p: 1 }}>
+      <Box 
+        bgcolor={getStatusColor(user.meetingStatus)}
+        sx={{ p: 1 }} />
+      <Box sx={{ display: "flex", flexDirection: "column", ml: 1 }}>
+        <Typography variant="h6">{user.name}</Typography>
+        <Typography variant="caption">{getMeetingStatusText(user.meetingStatus)}</Typography>
+      </Box>
+      <IconButton sx={{ position: "absolute", right: 0 }}>
+        <Settings />
+      </IconButton>
     </Box>
   );
 };