63 lines
1.3 KiB
JavaScript
63 lines
1.3 KiB
JavaScript
import PropTypes from "prop-types";
|
|
import { withStyles } from '@material-ui/core/styles'
|
|
import Header from '../organisms/Header'
|
|
import RootContainer from '../atoms/RootContainer'
|
|
import Footer from '../organisms/Footer';
|
|
|
|
const styles = theme => ({
|
|
head: {
|
|
width: '100%',
|
|
zIndex: '999',
|
|
height: '64px',
|
|
background: theme.palette.secondary.main,
|
|
position: 'fixed',
|
|
|
|
[theme.breakpoints.up('sm')]: {
|
|
height: '64px'
|
|
}
|
|
|
|
},
|
|
content: {
|
|
background: theme.palette.background.grid,
|
|
top: '64px',
|
|
[theme.breakpoints.up('sm')]: {
|
|
top: '64px',
|
|
},
|
|
position: 'relative',
|
|
overflow: 'auto',
|
|
},
|
|
footer: {
|
|
marginTop: theme.spacing(10),
|
|
},
|
|
});
|
|
|
|
function LayoutGrid(props) {
|
|
|
|
const { classes } = props;
|
|
|
|
return (
|
|
<RootContainer>
|
|
<div id="H" className={classes.head}>
|
|
<div className={classes.inner}>
|
|
<Header backLink={props.backLink} />
|
|
</div>
|
|
</div>
|
|
<div id="C" className={classes.content}>
|
|
{props.children}
|
|
</div>
|
|
<div id="F" className={classes.footer}>
|
|
<Footer />
|
|
</div>
|
|
|
|
</RootContainer>
|
|
)
|
|
}
|
|
|
|
LayoutGrid.defaultProps = {
|
|
backLink: "/"
|
|
}
|
|
LayoutGrid.propTypes = {
|
|
backLink: PropTypes.string
|
|
}
|
|
|
|
export default withStyles(styles)(LayoutGrid) |