63 lines
1.2 KiB
JavaScript
63 lines
1.2 KiB
JavaScript
import PropTypes from "prop-types";
|
|
|
|
import { withStyles } from '@material-ui/core/styles'
|
|
import DetailAppBar from '../organisms/DetailAppBar'
|
|
|
|
const styles = theme => ({
|
|
root: {
|
|
height: '100%'
|
|
},
|
|
head: {
|
|
width: '100%',
|
|
|
|
height: '56px',
|
|
background: 'silver',
|
|
position: 'fixed',
|
|
|
|
[theme.breakpoints.up('sm')]: {
|
|
height: '64px'
|
|
}
|
|
|
|
},
|
|
content: {
|
|
top: '56px',
|
|
height: 'calc(100vh - 56px)',
|
|
[theme.breakpoints.up('sm')]: {
|
|
top: '64px',
|
|
height: 'calc(100vh - 64px)',
|
|
},
|
|
position: 'relative',
|
|
overflow: 'auto',
|
|
|
|
}
|
|
});
|
|
|
|
function LayoutDetail(props) {
|
|
|
|
const { classes } = props;
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<div id="H" className={classes.head}>
|
|
<div className={classes.inner}>
|
|
<DetailAppBar backLink={props.backLink} logo={props.logo}/>
|
|
</div>
|
|
</div>
|
|
<div id="C" className={classes.content}>
|
|
{props.children}
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
LayoutDetail.defaultProps = {
|
|
backLink:"/",
|
|
logo: "default.svg"
|
|
}
|
|
LayoutDetail.propTypes = {
|
|
backLink : PropTypes.string,
|
|
logo: PropTypes.string,
|
|
}
|
|
|
|
export default withStyles(styles)(LayoutDetail) |