left panel hide and show

Author: yijunliu90

app/src/containers/CustomizationPanel.tsx

@@ -56,7 +56,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     .children.find((el) => {
       return el.childId === state.canvasFocus.childId;
     });
-  
+
   useEffect( () => {
     currFocus?.attributes?.compLink && setCompLink(currFocus.attributes.compLink);
   }, [state]);
@@ -215,7 +215,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     searchNestedChildren(state.components);
     return isLinked;
   };
-  
+
   const updateAttributeWithState = (attributeName, componentProviderId, statePropsId, statePropsRow, stateKey='') => {
     const newInput = statePropsRow.value;
     // get the stateProps of the componentProvider
@@ -382,7 +382,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
       document.removeEventListener('keydown', keyBindedFunc);
     };
   }, []);
-  
+
   if(state.canvasFocus.childId === null) {
     return (
       <div className="column right" id="rightContainer" style={style}>

app/src/containers/LeftContainer.tsx

@@ -4,6 +4,7 @@ import ComponentDrag from '../components/right/ComponentDrag';
 import DragDropPanel from '../components/left/DragDropPanel';
 import StateContext from '../context/context';
 import { styleContext } from './AppContainer';
+
 // Left-hand portion of the app, where component options are displayed
 const LeftContainer = (props): JSX.Element => {
   const { style } = useContext(styleContext);
@@ -23,16 +24,20 @@ const LeftContainer = (props): JSX.Element => {
   }, []);
 
   return (
-    <div className="column left" style={style}>
-      <Grid container direction="column" alignItems="center">
-        <h4>Drag and Drop</h4>
-        <DragDropPanel isThemeLight={props.isThemeLight}/>
-        <div id={'CompBottomHalf'}>
-          <ComponentDrag isThemeLight={props.isThemeLight}/>
+    <div style={{borderRight: "4px solid #3FD0A2"}}>
+        <div className="column left hide-show" style={style}>
+          <Grid container direction="column" alignItems="center">
+            <h4>Drag and Drop</h4>
+            <DragDropPanel isThemeLight={props.isThemeLight}/>
+            <div id={'CompBottomHalf'}>
+              <ComponentDrag isThemeLight={props.isThemeLight}/>
+            </div>
+          </Grid>
         </div>
-      </Grid>
     </div>
   );
 };
 
+{/* <div className="arrow-right"></div> */}
+
 export default LeftContainer;

app/src/public/styles/style.css

@@ -47,7 +47,7 @@ h4 {
   height: 300px;
   width: 410px;
   flex-grow: 1;
-  padding-left: 10px; 
+  padding-left: 10px;
   padding-right: 10px;
 }
 .HTMLItemCreate {
@@ -88,16 +88,43 @@ LEFT COLUMN
 /////////////////////////////////////////////////
 */
 
+.app-container {
+  position: relative;
+}
+
 .left {
   padding: 10px 10px 10px 0px;
   display: flex;
-  width: 225px;
-  min-width: 225px;
+  /* width: 225px;
+  min-width: 225px; */
   flex-direction: column;
   align-content: center;
   position: relative;
   overflow-x: hidden;
 }
+.hide-show {
+  opacity: 0;
+  width: 0;
+  transition: opacity 0.5s linear, width 0.5s ease-in-out;
+  position: absolute;
+  height: 100%;
+}
+.hide-show:hover {
+  opacity: 1;
+  width: 225px;
+  min-width: 225px;
+  z-index: 289;
+}
+.arrow-right {
+  width: 0;
+  height: 0;
+  border-top: 20px solid transparent;
+  border-bottom: 20px solid transparent;
+  border-left: 20px solid pink;
+  margin-top: 50%;
+}
+
+
 .HTMLItems {
   display: flex;
   flex-direction: column;
@@ -357,9 +384,9 @@ RIGHT COLUMN
   cursor: pointer;
 }
 
-/* 
+/*
 /////////////////////////////////////////////////////
-BOTTOM PANEL 
+BOTTOM PANEL
 /////////////////////////////////////////////////////
 */
 
@@ -409,6 +436,7 @@ BOTTOM PANEL
   background-color: 252526;
 }
 
+
 /*
 //////////////////////////////////////////
 NAVBAR
@@ -423,7 +451,7 @@ NAVBAR
 #customized-menu {
   width: 16%;
 }
-/* 
+/*
 /////////////////////////////////////////////////
 ANNOTATIONS
 /////////////////////////////////////////////////
@@ -600,4 +628,4 @@ a.nav_link:hover {
   display: flex;
   flex-direction: column;
   align-items: center;
-}
+}