prop drilled bottomShow piece of state from MainContainer parent component to BottomPanel child component to change expand and collapse material ui icons. And changed onMouseOver event handler to onClick event handler on BottomTabs component. Install more Material UI dependencies also

Author: johnwage

app/src/components/bottom/BottomPanel.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import BottomTabs from './BottomTabs';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
 
 const BottomPanel = (props): JSX.Element => {
   let y: number = 0;
@@ -15,18 +16,17 @@ const BottomPanel = (props): JSX.Element => {
     //Start listeners when the user clicks the bottom panel tab
     document.addEventListener('mousemove', mouseMoveHandler);
     document.addEventListener('mouseup', mouseUpHandler);
-    window.addEventListener('message', handleIframeMessage);//listens for messages from the iframe when the mouse is over it
+    window.addEventListener('message', handleIframeMessage); //listens for messages from the iframe when the mouse is over it
   };
-  
+
   //Interpret the messages from the iframe
   const handleIframeMessage = (e) => {
     if (e.data === 'iframeMouseUp') {
       mouseUpHandler();
-    }else if(e.data.type === 'iframeMouseMove'){
-      mouseMoveHandler(e.data)
+    } else if (e.data.type === 'iframeMouseMove') {
+      mouseMoveHandler(e.data);
     }
-  }    
-
+  };
 
   const mouseMoveHandler = function (e: MouseEvent): void {
     // How far the mouse has been moved
@@ -54,12 +54,21 @@ const BottomPanel = (props): JSX.Element => {
 
   return (
     <>
-    <div className="bottom-panel" id="resize" ref={node}>
-      <div id="resize-drag" onMouseDown={mouseDownHandler} tabIndex={0}>
-        ......
+      <div className="bottom-panel" id="resize" ref={node}>
+        <div
+          id="resize-drag"
+          onMouseDown={mouseDownHandler}
+          onClick={() => props.setBottomShow(true)}
+          tabIndex={0}
+        >
+          {props.bottomShow ? <ExpandMore /> : <ExpandLess />}
+        </div>
+        <BottomTabs
+          setBottomShow={props.setBottomShow}
+          isThemeLight={props.isThemeLight}
+        />
       </div>
-      <BottomTabs setBottomShow = {props.setBottomShow} isThemeLight={props.isThemeLight} />
-    </div></>
+    </>
   );
 };
 

app/src/components/bottom/BottomTabs.tsx

@@ -57,7 +57,7 @@ const BottomTabs = (props): JSX.Element => {
         zIndex: 1,
         borderTop: '2px solid grey'
       }}
-      onMouseOver={() => {
+      onClick={() => {
         props.setBottomShow(true);
       }}
     >

app/src/containers/MainContainer.tsx

@@ -119,6 +119,7 @@ const MainContainer = (props): JSX.Element => {
       </div>
       <div className={showPanel} ref={ref}>
         <BottomPanel
+          bottomShow={bottomShow}
           setBottomShow={setBottomShow}
           isThemeLight={props.isThemeLight}
         />