Drawer.tsx

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
import { withRouter, RouteComponentProps } from 'react-router';
import CleanLink from '../CleanLink';

import { animated, useTransition } from 'react-spring';
import { DrawerItemData } from './getDrawerItems';

const DrawerContainer = styled(List)`
  height: 100%;
  width: 100%;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
`;

const Drawer = ({ itemData, open, match }: { itemData: DrawerItemData[]; open: boolean } & RouteComponentProps<{}>) => {
  const drawer = useTransition(open, null, {
    from: { width: 0 },
    enter: { width: 200 },
    leave: { width: 0 }
  });

  return (
    <React.Fragment>
      {
        drawer.map(({ item, key, props }) =>
          item &&
          <animated.div style={props} key={key}>
            <DrawerContainer>
              {itemData.map(({ path, label, Icon }) =>
                <CleanLink to={path} key={label + path}>
                  <ListItem button>
                    <ListItemIcon>
                      <Icon />
                    </ListItemIcon>
                    <ListItemText primary={label} />
                  </ListItem>
                </CleanLink>
              )}
            </DrawerContainer>
          </animated.div>
        )
      }
    </React.Fragment>
  );

};

Drawer.propTypes = {
  itemData: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string.isRequired,
    path: PropTypes.string.isRequired,
    Icon: PropTypes.elementType.isRequired
  })),

  open: PropTypes.bool,

  match: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired
};

Drawer.defaultProps = {
  itemData: [],
  open: true
};

export default withRouter(Drawer);