working css

Author: brianjshan

app/src/components/bottom/BottomTabs.tsx

@@ -19,23 +19,32 @@ const BottomTabs = () => {
 
   return (
     <div className={classes.root}>
-      <Box display="flex" justifyContent="space-between">
-        <Tabs
-          value={tab}
-          onChange={handleChange}
-          classes={{
-            root: classes.tabsRoot,
-            indicator: classes.tabsIndicator
-          }}
-        >
-          <Tab
-            disableRipple
-            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label="Code Preview"
-          />
-        </Tabs>
-      </Box>
-      {tab === 0 && <CodePreview />}
+      <div id="resizeMe" className="resizable">
+        <Box className="resizer" display="flex" justifyContent="space-between">
+          <Tabs
+            value={tab}
+            onChange={handleChange}
+            classes={{
+              root: classes.tabsRoot,
+              indicator: classes.tabsIndicator
+            }}
+          >
+            <Tab
+              disableRipple
+              classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
+              label="Code Preview"
+            />
+            <Tab
+              classes={{
+                root: classes.tabsRoot,
+                selected: classes.tabSelected
+              }}
+              label="Tree Diagram"
+            />
+          </Tabs>
+        </Box>
+        {tab === 0 && <CodePreview />}
+      </div>
     </div>
   );
 };

app/src/public/styles/style.css

@@ -17,8 +17,8 @@ body {
   overflow: hidden;
 }
 /**************
-* 
-* for Material React Table found in Add Child Props 
+*
+* for Material React Table found in Add Child Props
 *
 ***************/
 
@@ -36,7 +36,7 @@ body {
 }
 
 /*
-/////////////////////////////////////////// 
+///////////////////////////////////////////
 Remove focus styling
 /////////////////////////////////////////////
 */
@@ -73,7 +73,7 @@ header {
 } */
 
 /*
-/////////////////////////////////////////// 
+///////////////////////////////////////////
 BUTTONS
 /////////////////////////////////////////////
 */
@@ -83,7 +83,7 @@ BUTTONS
 }
 
 /*
-/////////////////////////////////////////// 
+///////////////////////////////////////////
 LEFT COLUMN
 /////////////////////////////////////////////
 */
@@ -131,7 +131,7 @@ LEFT COLUMN
 }
 
 /*
-/////////////////////////////////////////// 
+///////////////////////////////////////////
 MAIN COLUMN
 /////////////////////////////////////////////
 */
@@ -214,8 +214,22 @@ h1 {
   text-align: center;
 }
 
+.resizable {
+  position: relative;
+}
+
+.resizer {
+  position: absolute;
+  cursor: row-resize;
+  top: 0;
+  height: 5px;
+  left: 0;
+  right: 0;
+  width: 100%;
+}
+
 /*
-/////////////////////////////////////////// 
+///////////////////////////////////////////
 RIGHT COLUMN
 /////////////////////////////////////////////
 */