aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/src/MainPage.js32
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>
);