Add toggleable chat drawer in call

During a call, the chat button is enabled and lets the user open the
chat drawer.

GitLab: #177
Change-Id: I7a2ae09fca5af904c3280bc948a2d36135c1c63d
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index b6266ac..29dd4e0 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -44,11 +44,12 @@
   CallingVideoCameraButton,
   CallingVolumeButton,
 } from '../components/CallButtons';
+import CallChatDrawer from '../components/CallChatDrawer';
 import { CallContext, CallStatus } from '../contexts/CallProvider';
 import { CallPending } from './CallPending';
 
 export default () => {
-  const { callRole, callStatus } = useContext(CallContext);
+  const { callRole, callStatus, isChatShown } = useContext(CallContext);
 
   if (callStatus !== CallStatus.InCall) {
     return (
@@ -60,7 +61,12 @@
     );
   }
 
-  return <CallInterface />;
+  return (
+    <Box flexGrow={1} display="flex">
+      <CallInterface />
+      {isChatShown && <CallChatDrawer />}
+    </Box>
+  );
 };
 
 interface Props {
@@ -86,7 +92,7 @@
   }, [remoteStream]);
 
   return (
-    <>
+    <Box display="flex" flexGrow={1}>
       <video
         ref={remoteVideoRef}
         autoPlay
@@ -123,7 +129,7 @@
           </Grid>
         </Grid>
       </Box>
-    </>
+    </Box>
   );
 };