@eureca/eureca-ui/src/components/Drawer/SideDrawer.js

UI component library of Eureca's user and admin apps

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Hidden, List, ListItem, Divider } from '@material-ui/core';
import { makeStyles, useTheme } from '@material-ui/core/styles';

import { Flex } from '../Flex';

import { CategoryItem } from './CategoryItem';
import { UserItem } from './UserItem';
import { ExpanderControl } from './ExpanderControl';

import { colors } from '../../theme/colors';

import { ReactComponent as Logo } from '../../assets/images/logo.svg';
import { ReactComponent as MiniLogo } from '../../assets/images/logo-small.svg';

const styles = {
  menu: {
    minHeight: '567px',
    height: '100vh',
  },
};

const useStyles = makeStyles(() => ({
  root: {
    width: '100%',
    maxWidth: 250,
    backgroundColor: colors.gray2,
    transition: '0.3s',
    position: 'sticky',
    top: 0,
    left: 0,
    minHeight: '567px',
    height: '100vh',
    paddingTop: 0,
    paddingBottom: 0,
    zIndex: 999,
  },
  root_contracted: {
    width: '100%',
    maxWidth: 72,
    backgroundColor: colors.gray2,
    transition: '0.3s',
    position: 'sticky',
    top: 0,
    left: 0,
    minHeight: '567px',
    height: '100vh',
    paddingTop: 0,
    paddingBottom: 0,
    zIndex: 999,
  },
  divider: {
    backgroundColor: 'rgba(46, 202, 175, 0.2)',
  },
  text_typography: {
    fontSize: '0.875rem',
    lineHeight: '18px',
  },
  text_root: {
    color: colors.gray3,
  },
  item: {
    paddingLeft: 24,
    paddingTop: 14,
    paddingBottom: 14,
  },
  sub_item: {
    paddingLeft: 24,
    paddingTop: 14,
    paddingBottom: 14,
  },
}));

function SideDrawer({
  list,
  enlarged,
  current,
  onClick = () => {},
  user,
  onClickUser,
  onLogout,
  linkComponent,
  windowSize,
}) {
  const theme = useTheme();
  const classes = useStyles();

  const { xl, md, lg, xs } = theme.breakpoints.values;

  const [active, setActive] = useState(current);
  const [shrink, setShrink] = useState(windowSize?.width >= xs && windowSize?.width <= lg);

  const showContracted = enlarged
    ? false
    : (windowSize?.width < xl && shrink) || windowSize?.width < md;
  const listClasses = showContracted ? classes.root_contracted : classes.root;

  function handleMenuClick(id, item) {
    onClick(id, item);
    return setActive(id);
  }

  useEffect(() => {
    setActive(current);
  }, [current]);

  return (
    <List component="nav" aria-label="side-menu-eureca" className={listClasses}>
      <Flex height="100%" style={styles.menu}>
        <Hidden only={['xs', 'sm', 'xl']}>
          <ExpanderControl toggleExpand={() => setShrink(!shrink)} />
        </Hidden>

        <ListItem>
          <Flex height="72px" justifyContent="center" alignItems="center" width="100%">
            {showContracted ? (
              <MiniLogo height={40} fill={colors.green1} />
            ) : (
              <Logo height={18} fill={colors.green1} />
            )}
          </Flex>
        </ListItem>
        <Divider className={classes.divider} />

        <Flex flexGrow={1}>
          {list.top.map(item => (
            <CategoryItem
              key={item.id}
              id={item.id}
              icon={item.icon}
              text={item.text}
              subCategories={item.subCategories}
              activeItem={active}
              onlyIcons={showContracted}
              onClick={id => handleMenuClick(id, item)}
              href={item.href}
              linkComponent={linkComponent}
            />
          ))}
        </Flex>

        <Flex>
          <Divider className={classes.divider} />
          {list.bottom.map(item => (
            <CategoryItem
              key={item.id}
              id={item.id}
              icon={item.icon}
              text={item.text}
              subCategories={item.subCategories}
              activeItem={active}
              onlyIcons={showContracted}
              onClick={id => handleMenuClick(id, item)}
              href={item.href}
              linkComponent={linkComponent}
            />
          ))}
          <UserItem
            onlyIcons={showContracted}
            user={user}
            onClickUser={onClickUser}
            onLogout={onLogout}
          />
        </Flex>
      </Flex>
    </List>
  );
}

SideDrawer.propTypes = {
  list: PropTypes.shape({
    bottom: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.string.isRequired,
        icon: PropTypes.object.isRequired,
        text: PropTypes.string.isRequired,
        subCategories: PropTypes.arrayOf(
          PropTypes.shape({
            text: PropTypes.string.isRequired,
            id: PropTypes.string.isRequired,
          })
        ).isRequired,
      })
    ),
    top: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.string.isRequired,
        icon: PropTypes.object.isRequired,
        text: PropTypes.string.isRequired,
        subCategories: PropTypes.arrayOf(
          PropTypes.shape({
            text: PropTypes.string.isRequired,
            id: PropTypes.string.isRequired,
          })
        ).isRequired,
      })
    ),
  }),
  user: PropTypes.shape({
    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    name: PropTypes.string.isRequired,
    avatar: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  }),
  onClickUser: PropTypes.func,
  onLogout: PropTypes.func,
  linkComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
};

export { SideDrawer };