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

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';
import { FiMenu } from 'react-icons/fi';

import { IconContext } from 'react-icons';

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

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

const styles = {
  menuExpander: {
    position: 'absolute',
    right: -12,
    top: 19,
    backgroundColor: colors.white,
    borderRadius: '50%',
    zIndex: 999,
  },
};

function ExpanderControl({ toggleExpand }) {
  return (
    <Flex
      width="24px"
      height="24px"
      justifyContent="center"
      alignItems="center"
      cursorPointer
      style={styles.menuExpander}
      onClick={toggleExpand}
      boxShadow={1}
    >
      <IconContext.Provider value={{ color: colors.gray1 }}>
        <FiMenu />
      </IconContext.Provider>
    </Flex>
  );
}

ExpanderControl.propTypes = {
  toggleExpand: PropTypes.func.isRequired,
};

export { ExpanderControl };