feat: display chat as side pannel

src/components/common/ChatPannel.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import { Box, Paper, Slide } from '@material-ui/core';
+import { HEADER_HEIGHT } from '../../config/constants';
+
+const drawerWidth = 400;
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+  },
+  drawer: {
+    width: drawerWidth,
+    flexShrink: 0,
+  },
+  drawerHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
+    justifyContent: 'flex-start',
+  },
+  content: {
+    flexGrow: 1,
+    padding: theme.spacing(3),
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  contentShift: {
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    marginRight: 0,
+  },
+}));
+
+// eslint-disable-next-line react/prop-types
+export default function PersistentDrawerRight({ children, sideContent }) {
+  const classes = useStyles();
+  const theme = useTheme();
+  const [open, setOpen] = React.useState(false);
+
+  const handleDrawerOpen = () => {
+    setOpen(!open);
+  };
+
+  const handleDrawerClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div className={classes.root}>
+      <main
+        className={clsx(classes.content, {
+          [classes.contentShift]: open,
+        })}
+      >
+            <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            edge="end"
+            onClick={handleDrawerOpen}
+          >
+            <MenuIcon />
+          </IconButton>
+
+        <div className={classes.drawerHeader} />
+        {children}
+      </main>
+
+      <Paper square>
+        <Slide anchor="right" direction="left" in={open} mountOnEnter unmountOnExit minHeight={window.innerHeight - HEADER_HEIGHT}>  
+          <Box className={classes.drawer}>
+            <div className={classes.drawerHeader}>
+                <IconButton onClick={handleDrawerClose}>
+                {theme.direction === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+                </IconButton>
+            </div>
+            {sideContent}
+           </Box>
+        </Slide>
+      </Paper>
+     </div>
+   );
+}
+
+PersistentDrawerRight.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+  sideContent: PropTypes.arrayOf(PropTypes.element).isRequired,
+}

src/components/main/MainScreen.js

@@ -11,6 +11,7 @@ import Item from '../common/Item';
 import { hooks } from '../../config/queryClient';
 import HeaderRightContent from './HeaderRightContent';
 import ItemHeader from '../common/ItemHeader';
+import ChatPannel from '../common/ChatPannel';
 
 
 const MainScreen = () => {
@@ -47,8 +48,9 @@ const MainScreen = () => {
       headerLeftContent={leftContent}
       headerRightContent={<HeaderRightContent id={mainId} />}
     >
-      {content}
-      <Chatbox item={item} />
+      <ChatPannel sideContent={[ <Chatbox item={item} /> ]}>
+        {content}
+      </ChatPannel>
     </Main>
   );
 };