Add drawer for devices

1 files changed, 28 insertions, 4 deletions

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 6db458e..287a21f 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import ContainerDimensions from 'react-container-dimensions';
 import MainToobar from './MainToolbar';
 import MainMap from './MainMap';
+import Drawer from '@material-ui/core/Drawer';
 import withStyles from '@material-ui/core/styles/withStyles';
 
 const styles = theme => ({
@@ -10,6 +11,23 @@ const styles = theme => ({
     display: "flex",
     flexDirection: "column"
   },
+  content: {
+    flexGrow: 1,
+    display: "flex",
+    flexDirection: "row",
+    [theme.breakpoints.down('xs')]: {
+      flexDirection: "column-reverse"
+    }
+  },
+  drawerPaper: {
+    position: 'relative',
+    [theme.breakpoints.up('sm')]: {
+      width: 350
+    },
+    [theme.breakpoints.down('xs')]: {
+      height: 250
+    }
+  },
   mapContainer: {
     flexGrow: 1
   }
@@ -46,10 +64,16 @@ class MainPage extends Component {
       return (
         <div className={classes.root}>
           <MainToobar history={this.props.history} />
-          <div className={classes.mapContainer}>
-            <ContainerDimensions>
-              <MainMap/>
-            </ContainerDimensions>
+          <div className={classes.content}>
+            <Drawer
+              variant="permanent"
+              classes={{ paper: classes.drawerPaper }}>
+            </Drawer>
+            <div className={classes.mapContainer}>
+              <ContainerDimensions>
+                <MainMap/>
+              </ContainerDimensions>
+            </div>
           </div>
         </div>
       );