aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2018-09-06 16:40:14 +1200
committerAnton Tananaev <anton.tananaev@gmail.com>2018-09-06 16:40:14 +1200
commitedfa42a162cc65804c6b5853bc1cbe2de499c09c (patch)
treec123a1a605787fc212fc967dc2e61059763fa4dc
parent8fdec9a47e224b98affc023c37e5d192c265fa42 (diff)
downloadtrackermap-web-edfa42a162cc65804c6b5853bc1cbe2de499c09c.tar.gz
trackermap-web-edfa42a162cc65804c6b5853bc1cbe2de499c09c.tar.bz2
trackermap-web-edfa42a162cc65804c6b5853bc1cbe2de499c09c.zip
Add drawer for devices
-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 6db458ec..287a21fa 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>
);