From c2279eeb42d33dce3c1719642f804f81e2140793 Mon Sep 17 00:00:00 2001
From: J Taylor <jon@momentic.co>
Date: Mon, 21 Jun 2021 14:43:40 +0100
Subject: [PATCH] add onclose handler to aside

---
 dailyjs/shared/components/Aside/Aside.js      | 25 +++++++++++++++++--
 .../shared/components/Aside/PeopleAside.js    |  4 +--
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/dailyjs/shared/components/Aside/Aside.js b/dailyjs/shared/components/Aside/Aside.js
index 8511846..1f717ef 100644
--- a/dailyjs/shared/components/Aside/Aside.js
+++ b/dailyjs/shared/components/Aside/Aside.js
@@ -1,31 +1,52 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { ReactComponent as IconClose } from '../../icons/close-sm.svg';
+import { Button } from '../Button';
 
 export const ASIDE_WIDTH = 380;
 
-export const Aside = ({ children }) => (
+export const Aside = ({ onClose, children }) => (
   <aside className="call-aside">
     <div className="inner">{children}</div>
+    <div className="close">
+      <Button
+        size="small-square"
+        variant="dark"
+        className="closeButton"
+        onClick={onClose}
+      >
+        <IconClose />
+      </Button>
+    </div>
     <style jsx>{`
       .call-aside {
         background: white;
+        position: relative;
         width: ${ASIDE_WIDTH}px;
         height: 100vh;
         box-sizing: border-box;
         box-shadow: 0px 15px 35px rgba(18, 26, 36, 0.25);
         color: var(--text-default);
-        overflow: hidden;
       }
 
       .call-aside .inner {
+        overflow-x: hidden;
         overflow-y: scroll;
       }
+
+      .call-aside .close {
+        position: absolute;
+        top: var(--spacing-xxs);
+        left: calc(-48px - var(--spacing-xxs));
+        z-index: 99;
+      }
     `}</style>
   </aside>
 );
 
 Aside.propTypes = {
   children: PropTypes.node,
+  onClose: PropTypes.func,
 };
 
 export default Aside;
diff --git a/dailyjs/shared/components/Aside/PeopleAside.js b/dailyjs/shared/components/Aside/PeopleAside.js
index 6a72c5d..b9b0ce5 100644
--- a/dailyjs/shared/components/Aside/PeopleAside.js
+++ b/dailyjs/shared/components/Aside/PeopleAside.js
@@ -93,7 +93,7 @@ PersonRow.propTypes = {
 
 export const PeopleAside = () => {
   const { callObject } = useCallState();
-  const { showPeopleAside } = useUIState();
+  const { showPeopleAside, setShowPeopleAside } = useUIState();
   const { allParticipants, isOwner } = useParticipants();
 
   if (!showPeopleAside) {
@@ -101,7 +101,7 @@ export const PeopleAside = () => {
   }
 
   return (
-    <Aside>
+    <Aside onClose={() => setShowPeopleAside(false)}>
       {isOwner && (
         <div className="owner-actions">
           <Button