Improve ui & performance

app/src/App.tsx

@@ -3,7 +3,7 @@ import * as q from '../../backend/src/Model'
 
 import { Tree } from './components/Tree'
 import TitleBar from './components/TitleBar'
-import { Sidebar } from './components/Sidebar'
+import Sidebar from './components/Sidebar/Sidebar'
 
 import { withTheme, Theme } from '@material-ui/core/styles'
 
@@ -12,6 +12,7 @@ class State {
 }
 
 interface Props {
+  name: string
   theme: Theme
 }
 
@@ -21,34 +22,47 @@ class App extends React.Component<Props, State> {
     this.state = {
       selectedNode: undefined,
     }
+  }
 
-    console.log('asd', this.props)
-    this.theme = this.props.theme
-    this.styles = {
-      primaryText: {
-        backgroundColor: this.theme.palette.background.default,
-        padding: `${this.theme.spacing.unit}px ${this.theme.spacing.unit * 2}px`,
-        color: this.theme.palette.text.primary,
+  private getStyles(): {[s: string]: React.CSSProperties} {
+    const { theme } = this.props
+    return {
+      left: {
+        backgroundColor: theme.palette.background.default,
+        color: theme.palette.text.primary,
+        height: 'calc(100vh - 64px)',
+        float: 'left',
+        width: '60vw',
+        overflowY: 'scroll',
+        overflowX: 'hidden',
+        display: 'block',
       },
-      primaryColor: {
-        backgroundColor: this.theme.palette.background.default,
-        // padding: `${this.theme.spacing.unit}px ${this.theme.spacing.unit * 2}px`,
-        color: this.theme.palette.common.white,
+      right: {
+        height: 'calc(100vh - 64px)',
+        backgroundColor: theme.palette.background.default,
+        color: theme.palette.text.primary,
+        float: 'right', width: '40vw',
+        overflowY: 'scroll',
+        overflowX: 'hidden',
+        display: 'block',
       },
     }
   }
 
-  private theme: Theme
-  private styles: any
-
   public render() {
-    return <div style={this.styles.primaryColor}>
+    return <div>
       <TitleBar />
-      <Tree didSelectNode={(node: q.TreeNode) => {
-        this.setState({ selectedNode: node })
-        console.log('did select', node)
-      }} />
-    </div>
+      <div>
+          <div style={this.getStyles().left}>
+            <Tree didSelectNode={(node: q.TreeNode) => {
+              this.setState({ selectedNode: node })
+            }} />
+          </div>
+          <div style={this.getStyles().right}>
+            <Sidebar node={this.state.selectedNode} />
+          </div>
+      </div>
+    </div >
   }
 }