Merge pull request #14 from daily-demos/dailyjs/aside-onclose

add onClose handler to aside

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;

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