diff options
| -rw-r--r-- | modern/src/MainPage.js | 32 |
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> ); |