Proper drawer behaviour

* Move the content to the left when the drawer is opened

src/components/App.js

@@ -76,10 +76,20 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
       Object.assign({}, ...this.props.config.topics) : this.props.config.topics;
   }
 
-  static styles() {
+  static styles(theme) {
     return {
-      drawerPaper: {
+      contentElement: {
-        width: 320
+        transition: theme.transitions.create(["width"], {
+          easing: theme.transitions.easing.sharp,
+          duration: theme.transitions.duration.leavingScreen
+        })
+      },
+      contentElementShifted: {
+        width: "calc(100% - 340px)",
+        transition: theme.transitions.create(["width"], {
+          easing: theme.transitions.easing.easeOut,
+          duration: theme.transitions.duration.enteringScreen
+        })
       }
     };
   }
@@ -147,8 +157,15 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
         state: this.state.mqttState,
         changeState: this.changeState
       }}>
+        <div className={
+          this.state.drawerOpened
+            ? this.props.classes.contentElementShifted
+            : this.props.classes.contentElement
+        }>
           <TopBar connected={this.state.mqttConnected}
             onSearch={(s) => this.setState({ search: s })} />
+          {this.controlMap(this.state.search)}
+        </div>
         <SideBar open={this.state.drawerOpened}
           control={this.state.selectedControl}
           onCloseRequest={this.closeDrawer}
@@ -158,7 +175,6 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
           {this.state.selectedControl == null
             || <UiItemList controls={this.state.selectedControl.ui} />}
         </SideBar>
-        {this.controlMap(this.state.search)}
         <Snackbar
           anchorOrigin={{
             vertical: "bottom",

src/components/SideBar.js

@@ -35,11 +35,11 @@ const SideBar = (props: Props) => (
         <span>
           {props.icon == null || renderRawIcon(props.icon, "mdi-36px")}
         </span>
-        <Typography variant="title" className={props.classes.flex}>
+        <Typography variant="title" className={props.classes.title}>
           {props.control == null ? "" : props.control.name}
         </Typography>
         <IconButton onClick={props.onCloseRequest}>
-          <i className="mdi mdi-close mdi-36px"></i>
+          <i className="mdi mdi-close"></i>
         </IconButton>
       </Toolbar>
     </AppBar>
@@ -49,13 +49,14 @@ const SideBar = (props: Props) => (
   </Drawer>
 );
 
-const styles = {
+const styles = (theme) => ({
   drawerPaper: {
     width: 340
   },
-  flex: {
+  title: {
-    flex: 1
+    flex: 1,
+    marginLeft: theme.spacing.unit
   }
-};
+});
 
 export default withStyles(styles)(SideBar);