score:3

Accepted answer
import React from "react";
import Grid from "@material-ui/core/Grid";
import Dialog from "@material-ui/core/Dialog";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import { withStyles } from "@material-ui/core/styles";
const styles = {
  root: {
    height: "100%"
  },
  project: {
    backgroundColor: "lightblue",
    height: "100%"
  },
  right: {
    height: "100%"
  },
  media: {
    backgroundColor: "lightgreen",
    height: "70%"
  },
  desc: {
    backgroundColor: "yellow",
    height: "30%"
  }
};
const MyDialog = props => {
  return (
    <Dialog fullScreen open={props.open} onClose={props.handleClose}>
      <Grid container className={props.classes.root}>
        <Grid item xs={3} className={props.classes.project}>
          <IconButton
            color="inherit"
            onClick={props.handleClose}
            aria-label="Close"
          >
            <CloseIcon />
          </IconButton>
          Project
        </Grid>
        <Grid item xs={9}>
          <Grid container direction="column" className={props.classes.right}>
            <Grid item className={props.classes.media}>
              Media
            </Grid>
            <Grid item className={props.classes.desc}>
              Description
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Dialog>
  );
};
export default withStyles(styles)(MyDialog);

Related Query

More Query from same tag