BrowseMenu.tsx

import * as React from 'react';
import compose from 'recompose/compose';
import { withStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import Divider from 'material-ui/Divider';
import List, { ListItem, ListItemText } from 'material-ui/List';
import PlayArrow from 'material-ui-icons/PlayArrow';
import Collapse from 'material-ui/transitions/Collapse';
import Hidden from 'material-ui/Hidden';
import withWidth from 'material-ui/utils/withWidth';

interface IBrowseMenuProps extends React.ClassAttributes<any> {
    classes: any;
    width: any;
}

const styles = (theme) => ({
    root: theme.leftPanel.root,
    expandArrow: theme.arrows.expand,
    arrowOpened: theme.arrows.opened,
    arrowClosed: theme.arrows.closed,
    ulTitle: theme.leftPanel.title,
    ulWrapper: {
        padding: 0,
    },
});

class BrowseMenu extends React.Component<IBrowseMenuProps, any> {

    public constructor(props: any) {
        super(props);

        this.state = {
            expanded: true,
        };
    }

    public componentDidMount() {
        if (['sm', 'xs'].indexOf(this.props.width) !== -1) {
            this.setState({ expanded: false });
        }
    }

    private handleExpandClick = () => {
        this.setState({ expanded: !this.state.expanded });
    }

    public componentWillReceiveProps(nextProps) {
        if (['sm', 'xs'].indexOf(nextProps.width) === -1 && !this.state.expanded) {
            this.setState({ expanded: true });
        }
    }

    public render() {

        const { classes } = this.props;

        return (
            <Grid item xs={ 12 } md={ 2 } className={ classes.root }>
                <List className={ classes.ulWrapper }>

                    <div>
                        <h3 className={ `pl-20 pt-10 pb-10 green font-bold ${ classes.ulTitle }` }>BROWSE</h3>
                        <Hidden implementation="css" mdUp>
                            <PlayArrow onClick={ this.handleExpandClick }
                                       className={ `${classes.expandArrow} ${ this.state.expanded ? classes.arrowOpened : classes.arrowClosed }` }
                            />
                        </Hidden>
                    </div>

                    <Collapse in={ this.state.expanded } timeout="auto" unmountOnExit>
                        <div>
                            <Divider />
                            <a href="#dataset-top">
                                <ListItem button>
                                    <ListItemText primary="DATASET"/>
                                </ListItem>
                            </a>
                            <Divider />
                            <a href="#dataset-metadata">
                                <ListItem button>
                                    <ListItemText primary="METADATA"/>
                                </ListItem>
                            </a>
                            <Divider />
                            <a href="#dataset-locations">
                                <ListItem button>
                                    <ListItemText primary="LOCATION"/>
                                </ListItem>
                            </a>
                            <Divider />
                            <a href="#dataset-traits">
                                <ListItem button>
                                    <ListItemText primary="TRAITS OBSERVED"/>
                                </ListItem>
                            </a>
                            <Divider />
                            <a href="#dataset-accessions">
                                <ListItem button>
                                    <ListItemText primary="ACCESSIONS"/>
                                </ListItem>
                            </a>
                            <Divider />
                        </div>
                    </Collapse>
                </List>
            </Grid>
        );
    }

}

export default compose(withStyles(styles), withWidth())(BrowseMenu);