CODEWITHSUNDEEP
reactjsmaterial-ui
bc291
bc291

Reputation: 1161

React.js - Drawer covers page conent

I decided to implement Drawer component to my react project from material-ui library, like so:

class RightDrawer extends React.Component {
  state = {
    open: false,
  };

  handleDrawerOpen = () => {
    this.setState({ open: true });
  };

  handleDrawerClose = () => {
    this.setState({ open: false });
  };

  render() {
    const { classes, children, theme } = this.props;

    return (
      <div className={classes.root}>
        <AppBar
          position="absolute"
          className={classNames(classes.appBar, this.state.open && classes.appBarShift)}
        >
          <Toolbar disableGutters={!this.state.open}>
            <IconButton
              color="inherit"
              aria-label="Open drawer"
              onClick={this.handleDrawerOpen}
              className={classNames(classes.menuButton, this.state.open && classes.hide)}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="title" color="inherit" noWrap>
              Mini variant drawer
            </Typography>
          </Toolbar>
        </AppBar>
        <Drawer
          variant="permanent"
          classes={{
            paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
          }}
          open={this.state.open}
        >
          <div className={classes.toolbar}>
            <IconButton onClick={this.handleDrawerClose}>
              {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
            </IconButton>
          </div>
          <Divider />

            <List>{mailFolderListItems}</List>
        </Drawer>
        <main className={classes.content}>
          <div className={classes.toolbar} />
          {children}
        </main>
      </div>
    );
  }
}

RightDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(RightDrawer);

So I am wrapping all my components in RightDrawer component and simply inject them via {children}. Final result is: enter image description here

So it is cropped to like 1/3 of a page and when the table is filled: enter image description here

Should I insert Drawer directly to App.js rather than wrapping every component inside? Maybe it is cause by className={classes.root} ?

Upvotes: 2

Views: 683

Answers (1)

El.
El.

Reputation: 1245

The question description and code that you provide is not enough to answer this question. As I found so far, If you want to have a full height drawer you might add height to your root class. For example:

root: {
    height: '100vh',
}

Upvotes: 3

Related Questions