Revise click functionality on bottom menu. Remove vanilla JS and replaced with react state and dynamic CSS styling. Need to fix drag functionality

Author: johnwage

app/src/components/bottom/BottomPanel.tsx

@@ -28,7 +28,6 @@ const BottomPanel = (props): JSX.Element => {
   };
 
   const mouseMoveHandler = function (e: MouseEvent): void {
-
     const dy = y - e.clientY;
 
     const newVal = h + dy;
@@ -54,7 +53,7 @@ const BottomPanel = (props): JSX.Element => {
         <div
           id="resize-drag"
           onMouseDown={mouseDownHandler}
-          onClick={() => props.setBottomShow(true)}
+          onClick={() => props.setBottomShow(!props.bottomShow)}
           tabIndex={0}
         >
           {props.bottomShow ? <ExpandMore /> : <ExpandLess />}

app/src/components/bottom/BottomTabs.tsx

@@ -39,6 +39,10 @@ const BottomTabs = (props): JSX.Element => {
 
   arrow.renderArrow(state.canvasFocus?.childId);
 
+  const showBottomPanel = () => {
+    props.setBottomShow(true);
+  };
+
   return (
     <div
       className={`${classes.root} ${classes.rootLight}`}
@@ -47,9 +51,6 @@ const BottomTabs = (props): JSX.Element => {
         zIndex: 1,
         borderTop: '2px solid grey'
       }}
-      onClick={() => {
-        props.setBottomShow(true);
-      }}
     >
       <Box
         display="flex"
@@ -69,31 +70,37 @@ const BottomTabs = (props): JSX.Element => {
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Creation Panel"
+            onClick={showBottomPanel}
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Customization"
+            onClick={showBottomPanel}
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="CSS Editor"
+            onClick={showBottomPanel}
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Component Tree"
+            onClick={showBottomPanel}
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Context Manager"
+            onClick={showBottomPanel}
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="State Manager"
+            onClick={showBottomPanel}
           />
         </Tabs>
         <div className={classes.projectTypeWrapper}>

app/src/components/main/Canvas.tsx

@@ -363,6 +363,6 @@ const Canvas = (props: {}): JSX.Element => {
       </label>
     </div>
   );
-}
+};
 
-export default Canvas;
+export default Canvas;

app/src/containers/MainContainer.tsx

@@ -109,15 +109,27 @@ const MainContainer = (props): JSX.Element => {
     setBottomShow(false);
   };
 
-  let showPanel = bottomShow ? 'bottom-show' : 'bottom-hide';
+  const hideBottomPanelStyles = {
+    maxHeight: '64px',
+    boxSizing: 'border-box',
+    transition: 'all 0.5s ease-in-out'
+  };
+
+  const showBottomPanelStyles = {
+    maxHeight: '100%',
+    transition: 'all 0.5s ease-in-out'
+  };
 
   return (
     <div className="main-container" style={style} ref={containerRef}>
       <div className="main">
         <CanvasContainer isThemeLight={props.isThemeLight} />
         <DemoRender />
       </div>
-      <div className={showPanel} ref={ref}>
+      <div
+        ref={ref}
+        style={bottomShow ? showBottomPanelStyles : hideBottomPanelStyles}
+      >
         <BottomPanel
           bottomShow={bottomShow}
           setBottomShow={setBottomShow}

app/src/public/styles/style.css

@@ -502,25 +502,6 @@ BOTTOM PANEL
 /////////////////////////////////////////////////////
 */
 
-.bottom-hide {
-  max-height: 64px;
-  box-sizing: border-box;
-  transition: all 0.5s ease-in-out;
-}
-
-.bottom-show {
-  max-height: 100%;
-  transition: all 0.5s ease-in-out;
-}
-
-.bottom-hide:focus-within {
-  max-height: 100%;
-}
-/* 
-.bottom-hide:hover {
-  max-height: 100%;
-} */
-
 .tab-content {
   height: calc(100% - 76px);
   width: 100%;