updated navigation structure
This commit is contained in:
parent
a7ca249d1e
commit
60e252cb72
|
@ -3,10 +3,11 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.report-google-map-container > div {
|
.report-google-map-container > div {
|
||||||
height: 92% !important;
|
|
||||||
width: 50% !important;
|
width: 50% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sighting-google-map-container > div {
|
@media (min-width: 960px) {
|
||||||
height: 92% !important;
|
.sighting-google-map-container > div {
|
||||||
|
width: calc(100% - 241px) !important;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -1,75 +1,173 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { withStyles } from '@material-ui/core/styles';
|
import { withStyles } from '@material-ui/core/styles';
|
||||||
|
import Drawer from '@material-ui/core/Drawer';
|
||||||
import AppBar from '@material-ui/core/AppBar';
|
import AppBar from '@material-ui/core/AppBar';
|
||||||
import Tabs from '@material-ui/core/Tabs';
|
import Toolbar from '@material-ui/core/Toolbar';
|
||||||
import Tab from '@material-ui/core/Tab';
|
import List from '@material-ui/core/List';
|
||||||
|
import ListItem from '@material-ui/core/ListItem';
|
||||||
|
import ListItemIcon from '@material-ui/core/ListItemIcon';
|
||||||
|
import ListItemText from '@material-ui/core/ListItemText';
|
||||||
import Typography from '@material-ui/core/Typography';
|
import Typography from '@material-ui/core/Typography';
|
||||||
|
import IconButton from '@material-ui/core/IconButton';
|
||||||
|
import Hidden from '@material-ui/core/Hidden';
|
||||||
|
import Divider from '@material-ui/core/Divider';
|
||||||
|
import MenuIcon from '@material-ui/icons/Menu';
|
||||||
|
import HomeIcon from '@material-ui/icons/Home';
|
||||||
|
import AssignmentIcon from '@material-ui/icons/Assignment';
|
||||||
|
import MapIcon from '@material-ui/icons/Map';
|
||||||
|
import ListIcon from '@material-ui/icons/List';
|
||||||
|
import SlideshowIcon from '@material-ui/icons/Slideshow';
|
||||||
import Home from '../pages/Home';
|
import Home from '../pages/Home';
|
||||||
import ViewMap from '../pages/ViewMap';
|
import ViewMap from '../pages/ViewMap';
|
||||||
import Quiz from '../pages/Quiz';
|
import Quiz from '../pages/Quiz';
|
||||||
import SightingList from '../pages/SightingList';
|
import SightingList from '../pages/SightingList';
|
||||||
import Report from '../pages/Report';
|
import Report from '../pages/Report';
|
||||||
import Info from '../pages/Info';
|
|
||||||
|
|
||||||
function TabContainer(props) {
|
const drawerWidth = 240;
|
||||||
return (
|
|
||||||
<Typography component="div" style={{ padding: 8 * 3 }}>
|
|
||||||
{props.children}
|
|
||||||
</Typography>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
TabContainer.propTypes = {
|
|
||||||
children: PropTypes.node.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = theme => ({
|
const styles = theme => ({
|
||||||
root: {
|
root: {
|
||||||
flexGrow: 1,
|
flexGrow: 1,
|
||||||
backgroundColor: theme.palette.background.paper,
|
height: '100vh',
|
||||||
|
zIndex: 1,
|
||||||
|
overflow: 'hidden',
|
||||||
|
position: 'relative',
|
||||||
|
display: 'flex',
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
appBar: {
|
||||||
|
position: 'absolute',
|
||||||
|
marginLeft: drawerWidth,
|
||||||
|
[theme.breakpoints.up('md')]: {
|
||||||
|
width: `calc(100% - ${drawerWidth}px)`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
navIconHide: {
|
||||||
|
[theme.breakpoints.up('md')]: {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
toolbar: theme.mixins.toolbar,
|
||||||
|
drawerPaper: {
|
||||||
|
width: drawerWidth,
|
||||||
|
[theme.breakpoints.up('md')]: {
|
||||||
|
position: 'relative',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
flexGrow: 1,
|
||||||
|
backgroundColor: theme.palette.background.default,
|
||||||
|
padding: theme.spacing.unit * 3,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
class SimpleTabs extends React.Component {
|
class ResponsiveDrawer extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
value: 0,
|
mobileOpen: false,
|
||||||
};
|
key: ''
|
||||||
|
}
|
||||||
|
|
||||||
handleChange = (event, value) => {
|
handleDrawerToggle = () => {
|
||||||
this.setState({ value });
|
this.setState(state => ({ mobileOpen: !state.mobileOpen }));
|
||||||
};
|
}
|
||||||
|
|
||||||
|
nav = (text) => {
|
||||||
|
this.setState({
|
||||||
|
key: text
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { classes } = this.props;
|
const { classes, theme } = this.props;
|
||||||
const { value } = this.state;
|
|
||||||
|
|
||||||
return (
|
const drawer = (
|
||||||
<div className={classes.root}>
|
<div>
|
||||||
<AppBar position="static">
|
<div className={classes.toolbar} />
|
||||||
<Tabs value={value} onChange={this.handleChange} centered>
|
<Divider />
|
||||||
<Tab label="Home" />
|
<List>
|
||||||
<Tab label="Report a Sighting"/>
|
<ListItem button key='Home' onClick={() => this.nav('Home')}>
|
||||||
<Tab label="Sightings" />
|
<ListItemIcon><HomeIcon/></ListItemIcon>
|
||||||
<Tab label="Trail-Cam Quiz" />
|
<ListItemText primary='Home' />
|
||||||
<Tab label="View Map" />
|
</ListItem>
|
||||||
<Tab label="Marten Info" />
|
<ListItem button key='Report' onClick={() => this.nav('Report')}>
|
||||||
</Tabs>
|
<ListItemIcon><AssignmentIcon/></ListItemIcon>
|
||||||
</AppBar>
|
<ListItemText primary='Report' />
|
||||||
{value === 0 && <Home/>}
|
</ListItem>
|
||||||
{value === 1 && <Report/>}
|
<ListItem button key='Map' onClick={() => this.nav('Map')}>
|
||||||
{value === 2 && <SightingList/>}
|
<ListItemIcon><MapIcon/></ListItemIcon>
|
||||||
{value === 3 && <Quiz/>}
|
<ListItemText primary='Map' />
|
||||||
{value === 4 && <ViewMap/>}
|
</ListItem>
|
||||||
{value === 5 && <Info/>}
|
<ListItem button key='List' onClick={() => this.nav('List')}>
|
||||||
</div>
|
<ListItemIcon><ListIcon/></ListItemIcon>
|
||||||
);
|
<ListItemText primary='List' />
|
||||||
|
</ListItem>
|
||||||
|
<ListItem button key='Quiz' onClick={() => this.nav('Quiz')}>
|
||||||
|
<ListItemIcon><SlideshowIcon/></ListItemIcon>
|
||||||
|
<ListItemText primary='Quiz' />
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classes.root}>
|
||||||
|
<AppBar className={classes.appBar}>
|
||||||
|
<Toolbar>
|
||||||
|
<IconButton
|
||||||
|
color="inherit"
|
||||||
|
aria-label="Open drawer"
|
||||||
|
onClick={this.handleDrawerToggle}
|
||||||
|
className={classes.navIconHide}
|
||||||
|
>
|
||||||
|
<MenuIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Typography variant='title' color="inherit" noWrap>
|
||||||
|
The American Marten
|
||||||
|
</Typography>
|
||||||
|
</Toolbar>
|
||||||
|
</AppBar>
|
||||||
|
<Hidden mdUp>
|
||||||
|
<Drawer
|
||||||
|
variant="temporary"
|
||||||
|
anchor={theme.direction === 'rtl' ? 'right' : 'left'}
|
||||||
|
open={this.state.mobileOpen}
|
||||||
|
onClose={this.handleDrawerToggle}
|
||||||
|
classes={{
|
||||||
|
paper: classes.drawerPaper,
|
||||||
|
}}
|
||||||
|
ModalProps={{
|
||||||
|
keepMounted: true, // Better open performance on mobile.
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{drawer}
|
||||||
|
</Drawer>
|
||||||
|
</Hidden>
|
||||||
|
<Hidden smDown implementation="css">
|
||||||
|
<Drawer
|
||||||
|
variant="permanent"
|
||||||
|
open
|
||||||
|
classes={{
|
||||||
|
paper: classes.drawerPaper,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{drawer}
|
||||||
|
</Drawer>
|
||||||
|
</Hidden>
|
||||||
|
<div className={classes.toolbar} />
|
||||||
|
{this.state.key === 'Home' && <Home />}
|
||||||
|
{this.state.key === 'Report' && <Report />}
|
||||||
|
{this.state.key === 'Map' && <ViewMap />}
|
||||||
|
{this.state.key === 'List' && <SightingList />}
|
||||||
|
{this.state.key === 'Quiz' && <Quiz />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SimpleTabs.propTypes = {
|
ResponsiveDrawer.propTypes = {
|
||||||
classes: PropTypes.object.isRequired,
|
classes: PropTypes.object.isRequired,
|
||||||
|
theme: PropTypes.object.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default withStyles(styles)(SimpleTabs);
|
export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);
|
||||||
|
|
|
@ -17,6 +17,7 @@ const styles = theme => ({
|
||||||
container: {
|
container: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexWrap: 'wrap',
|
flexWrap: 'wrap',
|
||||||
|
marginTop: '64px'
|
||||||
},
|
},
|
||||||
textField: {
|
textField: {
|
||||||
marginLeft: theme.spacing.unit * 2,
|
marginLeft: theme.spacing.unit * 2,
|
||||||
|
|
Loading…
Reference in New Issue