added column on the left side of the chat drawer for team icons

src/app/UserWrapper.tsx

@@ -162,10 +162,7 @@ export default function UserWrapper(props: Props) {
       document.head.appendChild(style);
     }
 
-    console.log(isMobile)
-
     if (isMobile) {
-      console.log("isMobile")
       style.textContent = `
         #crisp-chatbox [aria-label="Open chat"] {
           bottom: 6em !important;

src/chat/ChatDrawer.tsx

@@ -1,41 +1,39 @@
 import { ChevronRight } from "@mui/icons-material";
-import { Box, Drawer, IconButton, Theme, Typography } from "@mui/material";
+import { Avatar, Box, Drawer, IconButton, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { useMobile } from "hooks";
 import { Team } from "models";
 import Chat from "./Chat";
 import { pond } from "protobuf-ts/pond";
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles<Theme>((theme: Theme) => ({
-  return ({
+  chatDrawer: {
-    chatDrawer: {
+    display: "flex",
-      display: "flex",
+    flexDirection: "column",
-      flexDirection: "column", // Arrange children vertically
+    backgroundColor: theme.palette.background.default,
-      backgroundColor: theme.palette.background.default,
+    height: "100%",
-      height: "100%",
+    maxHeight: "100%",
-      maxHeight: "100%",
+    minHeight: "100%",
-      minHeight: "100%",
+    minWidth: theme.spacing(54),
-      minWidth: theme.spacing(54),
+    maxWidth: theme.spacing(54),
-      maxWidth: theme.spacing(54),
+  },
-    },
+  chatContainer: {
-    chatContainer: {
+    flex: 1,
-      flex: 1, 
+    overflow: "hidden",
-      overflow: "hidden", 
+  },
-    },
+  chatDrawerMobile: {
-    chatDrawerMobile: {
+    backgroundColor: theme.palette.background.default,
-      backgroundColor: theme.palette.background.default,
+    height: "auto",
-      height: "auto",
+    width: "100%",
-      width: "100%"
+  },
-    },
+  drawerHeader: {
-    drawerHeader: {
+    display: "flex",
-      display: "flex",
+    alignItems: "center",
-      alignItems: "center",
+    padding: theme.spacing(1),
-      padding: theme.spacing(1),
+    ...theme.mixins.toolbar,
-      ...theme.mixins.toolbar,
+    justifyContent: "flex-start",
-      justifyContent: "flex-start"
+  },
-    }
+}));
-  });
-});
 
 interface Props {
   open: boolean;
@@ -48,17 +46,53 @@ export function ChatDrawer(props: Props) {
   const isMobile = useMobile();
   const classes = useStyles()
 
+  console.log(team.settings.avatar)
+
   return (
-    <Drawer open={open} onClose={onClose} anchor="right" >
+    <Drawer
-      <Box className={isMobile ? classes.chatDrawerMobile : classes.chatDrawer}>
+      open={open}
-        <Box className={classes.drawerHeader}>
+      onClose={onClose}
-          <IconButton onClick={onClose}>
+      anchor="right"
-            <ChevronRight />
+      slotProps={{
+        paper: {
+          sx: isMobile ? { width: "100%" } : undefined,
+        },
+      }}
+    >
+      <Box display="flex" flexDirection="row" height="100%">
+        {/* Side icon column */}
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          padding={1}
+          gap={1}
+          sx={(theme: Theme) => ({
+            backgroundColor: theme.palette.background.paper,
+            borderRight: `1px solid ${theme.palette.divider}`,
+          })}
+        >
+          {/* Add your icons here */}
+          <IconButton >
+            {/* <SomeIcon /> */}
+            <Avatar src={team.settings.avatar} />
+          </IconButton>
+          <IconButton>
+            {/* <AnotherIcon /> */}
           </IconButton>
-          <Typography>{team.name()} Chat</Typography>
         </Box>
-        <Box className={classes.chatContainer}>
+
-          <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM}/>
+        {/* Main chat area */}
+        <Box className={isMobile ? classes.chatDrawerMobile : classes.chatDrawer}>
+          <Box className={classes.drawerHeader}>
+            <IconButton onClick={onClose}>
+              <ChevronRight />
+            </IconButton>
+            <Typography>{team.name()} Chat</Typography>
+          </Box>
+          <Box className={classes.chatContainer}>
+            <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
+          </Box>
         </Box>
       </Box>
     </Drawer>