add left panel indicator

Author: wang9hu

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -203,6 +203,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
               className={isThemeLight ? `${classes.selectEmpty} ${classes.rootUnderlineLight} ${classes.inputTextLight}` : `${classes.selectEmpty} ${classes.rootUnderlineDark} ${classes.inputTextDark}`}
               value={inputType}
               onChange={(event, index) => setInputType(index.props.value)}
+              MenuProps={{ disablePortal: true }}
               style={ isThemeLight
                 ? {backgroundColor: '#eef0f1', color: '#000', border: '1px solid black', height: '28px', width: '200px'}
                 : {backgroundColor: 'gray', color: '#fff', border: '1px solid white', height: '28px', width: '200px'}}

app/src/components/main/Canvas.tsx

@@ -137,7 +137,7 @@ function Canvas(props): JSX.Element {
             }
           }
         }
-        if (!hasDiffParent) {
+        // if (!hasDiffParent) {
           dispatch({
             type: 'ADD CHILD',
             payload: {
@@ -146,8 +146,8 @@ function Canvas(props): JSX.Element {
               childId: null
             }
           });
-        } else {
-
+        // } else {
+        //   alert('something is wrong');
           // able to duplicate a component in dev only does not work for prod
           // create a new component
 
@@ -165,7 +165,7 @@ function Canvas(props): JSX.Element {
           //   setNewComp(!newComp)
           // }
 
-        }
+        // }
 
       }
     },

app/src/containers/LeftContainer.tsx

@@ -24,8 +24,8 @@ const LeftContainer = (props): JSX.Element => {
   }, []);
 
   return (
-    <div style={{borderRight: "4px solid #3FD0A2"}}>
-        <div className="column left hide-show" style={style}>
+    <div className="left-container hide-show">
+        <div className="column left" style={style}>
           <Grid container direction="column" alignItems="center">
             <h4>Drag and Drop</h4>
             <DragDropPanel isThemeLight={props.isThemeLight}/>
@@ -34,6 +34,11 @@ const LeftContainer = (props): JSX.Element => {
             </div>
           </Grid>
         </div>
+        <div className='left-indicator'>
+          <span className="material-symbols-outlined">
+            eject
+          </span>
+        </div>
     </div>
   );
 };

app/src/public/styles/style.css

@@ -6,7 +6,7 @@
 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0');
 
 html {
   box-sizing: border-box;
@@ -98,27 +98,43 @@ LEFT COLUMN
   position: relative;
 }
 
+.left-container {
+  display: flex;
+}
+
+.left-indicator {
+  height: 50%;
+  width: 20px;
+  background-color: silver;
+  writing-mode: vertical-lr;
+  text-align: center;
+  border-radius: 0 10px 10px 0;
+  align-self: center;
+}
+
 .left {
-  padding: 10px 10px 10px 0px;
+  padding: 0px;
   display: flex;
-  /* width: 225px;
-  min-width: 225px; */
+  height: 100%;
+  width: 235px;
+  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%;
+  left: -237px;
+  /* opacity: 0; */
+  transition: all 0.5s ease-in-out;
 }
+
 .hide-show:hover {
-  opacity: 1;
-  width: 225px;
-  min-width: 225px;
+  /* opacity: 1; */
+  left: 0px;
   z-index: 289;
 }