text: import React from 'react';
  import PropTypes from 'prop-types';
  import classNames from 'classnames';
  import { withStyles } from 'material-ui/styles';
  import { ListItem } from 'material-ui/List';
  import Button from 'material-ui/Button';
  import Collapse from 'material-ui/transitions/Collapse';
  import polyfill from 'react-lifecycles-compat';
  import Link from 'docs/src/modules/components/Link';
  
  const styles = theme => ({
    item: {
      display: 'block',
      paddingTop: 0,
      paddingBottom: 0,
    },
    itemLeaf: {
      display: 'flex',
      paddingTop: 0,
      paddingBottom: 0,
    },
    button: {
      justifyContent: 'flex-start',
      textTransform: 'none',
      width: '100%',
    },
    buttonLeaf: {
      justifyContent: 'flex-start',
      textTransform: 'none',
      width: '100%',
      fontWeight: theme.typography.fontWeightRegular,
      '&.depth-0': {
        fontWeight: theme.typography.fontWeightMedium,
      },
    },
    active: {
      color: theme.palette.primary.main,
      fontWeight: theme.typography.fontWeightMedium,
    },
  });
  
  class AppDrawerNavItem extends React.Component {
    static getDerivedStateFromProps(nextProps, prevState) {
      if (typeof prevState.open === 'undefined') {
        return {
          open: nextProps.openImmediately,
        };
      }
  
      return null;
    }
  
    state = {};
  
    handleClick = () => {
      this.setState({ open: !this.state.open });
    };
  
    render() {
      const {
        children,
        classes,
        depth,
        href,
        onClick,
        openImmediately,
        title,
        ...other
      } = this.props;
  
      const style = {
        paddingLeft: 8 * (3 + 2 * depth),
      };
  
      if (href) {
        return (
          <ListItem className={classes.itemLeaf} disableGutters {...other}>
            <Button
              component={props => (
                <Link variant="button" activeClassName={classes.active} href={href} {...props} />
              )}
              className={classNames(classes.buttonLeaf, `depth-${depth}`)}
              disableRipple
              onClick={onClick}
              style={style}
            >
              {title}
            </Button>
          </ListItem>
        );
      }
  
      return (
        <ListItem className={classes.item} disableGutters {...other}>
          <Button
            classes={{
              root: classes.button,
              label: openImmediately ? 'algolia-lvl0' : '',
            }}
            onClick={this.handleClick}
            style={style}
          >
            {title}
          </Button>
          <Collapse in={this.state.open} timeout="auto" unmountOnExit>
            {children}
          </Collapse>
        </ListItem>
      );
    }
  }
  
  AppDrawerNavItem.propTypes = {
    children: PropTypes.node,
    classes: PropTypes.object.isRequired,
    depth: PropTypes.number.isRequired,
    href: PropTypes.string,
    onClick: PropTypes.func,
    openImmediately: PropTypes.bool,
    title: PropTypes.string.isRequired,
  };
  
  AppDrawerNavItem.defaultProps = {
    openImmediately: false,
  };
  
  export default withStyles(styles)(polyfill(AppDrawerNavItem));
  