code on/off

src/components/CodeViewer.js

@@ -7,7 +7,7 @@ class CodeViewer extends Component {
 
   render() {
     return (
-      <div>
+      <div style={{height: '500px', border: '1px solid black'}}>
         {this.props.arduino}
         <p>{this.props.xml}</p>
       </div>

src/components/Home.js

@@ -3,23 +3,40 @@ import React, { Component } from 'react';
 import WorkspaceStats from './WorkspaceStats';
 import WorkspaceFunc from './WorkspaceFunc';
 import BlocklyWindow from './Blockly/BlocklyWindow';
+import CodeViewer from './CodeViewer';
 
 import Grid from '@material-ui/core/Grid';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
 
 class Home extends Component {
 
+  state = {
+    codeOn: false
+  }
+
+  onChange = () => {
+    this.setState({ codeOn: !this.state.codeOn });
+  }
 
   render() {
     return (
       <div>
         <WorkspaceStats />
         <Grid container spacing={2}>
-          <Grid item xs={12} md={6}>
+          <Grid item xs={12} md={this.state.codeOn ? 6 : 12} style={{position: 'relative'}}>
+            <FormControlLabel
+              style={{margin: '5px 10px 0 0', position: 'absolute', top: 0, right:0, zIndex:1}}
+              control={<Switch checked={this.state.codeOn} onChange={this.onChange} color='primary'/>}
+              label="Code"
+            />
             <BlocklyWindow />
           </Grid>
-          <Grid item xs={12} md={6}>
+          {this.state.codeOn ?
-            <div style={{height: '500px', border: '1px solid black'}}></div>
+            <Grid item xs={12} md={6}>
-          </Grid>
+              <CodeViewer/>
+            </Grid>
+          : null}
         </Grid>
         <WorkspaceFunc />
       </div>