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,16 +1,15 @@
 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) => {
-  return ({
+const useStyles = makeStyles<Theme>((theme: Theme) => ({
   chatDrawer: {
     display: "flex",
-      flexDirection: "column", // Arrange children vertically
+    flexDirection: "column",
     backgroundColor: theme.palette.background.default,
     height: "100%",
     maxHeight: "100%",
@@ -25,17 +24,16 @@ const useStyles = makeStyles((theme: Theme) => {
   chatDrawerMobile: {
     backgroundColor: theme.palette.background.default,
     height: "auto",
-      width: "100%"
+    width: "100%",
   },
   drawerHeader: {
     display: "flex",
     alignItems: "center",
     padding: theme.spacing(1),
     ...theme.mixins.toolbar,
-      justifyContent: "flex-start"
-    }
-  });
-});
+    justifyContent: "flex-start",
+  },
+}));
 
 interface Props {
   open: boolean;
@@ -48,8 +46,43 @@ 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
+      open={open}
+      onClose={onClose}
+      anchor="right"
+      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>
+        </Box>
+
+        {/* Main chat area */}
         <Box className={isMobile ? classes.chatDrawerMobile : classes.chatDrawer}>
           <Box className={classes.drawerHeader}>
             <IconButton onClick={onClose}>
@@ -61,6 +94,7 @@ export function ChatDrawer(props: Props) {
             <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
           </Box>
         </Box>
+      </Box>
     </Drawer>
   )
 }