added chat drawer

src/chat/ChatDrawer.tsx

@@ -0,0 +1,61 @@
+import { ChevronRight } from "@mui/icons-material";
+import { Box, Drawer, IconButton, Theme, Typography } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import { useMobile } from "hooks";
+import { Team } from "models";
+import { pond } from "protobuf-ts/pond";
+import Chat from "./Chat";
+
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
+    chatDrawer: {
+      backgroundColor: theme.palette.background.default,
+      // padding: theme.spacing(1),
+      height: "100%",
+      minWidth: theme.spacing(54),
+      maxWidth: theme.spacing(54),
+      // zIndex: 1000000000000,
+      // zIndex: theme.zIndex.drawer,
+    },
+    chatDrawerMobile: {
+      backgroundColor: theme.palette.background.default,
+      // padding: theme.spacing(1),
+      height: "auto",
+      width: "100%"
+    },
+    drawerHeader: {
+      display: "flex",
+      alignItems: "center",
+      padding: theme.spacing(1),
+      // necessary for content to be below app bar
+      ...theme.mixins.toolbar,
+      justifyContent: "flex-start"
+    }
+  });
+});
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  team: Team;
+}
+
+export function ChatDrawer(props: Props) {
+  const { open, onClose, team } = props;
+  const isMobile = useMobile();
+  const classes = useStyles()
+
+  return (
+    <Drawer open={open} onClose={onClose} anchor="right" sx={{ zIndex: 10000 }}>
+      <Box className={isMobile ? classes.chatDrawerMobile : classes.chatDrawer}>
+        <Box className={classes.drawerHeader}>
+          <IconButton onClick={onClose}>
+            <ChevronRight />
+          </IconButton>
+          <Typography>{team.name()} Chat</Typography>
+        </Box>
+        <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
+      </Box>
+    </Drawer>
+  )
+}