text: import React, { useContext } from 'react';
  import { Box } from 'theme-ui';
  import { Scrollbars } from 'react-custom-scrollbars';
  import Drawer from 'components/drawer';
  import { DrawerContext } from 'contexts/drawer/drawer.context';
  import { IoMdClose, IoMdMenu } from 'react-icons/io';
  import { Link as ScrollLink } from 'react-scroll';
  import MENU_DATA from './header.data';
  import Logo from 'components/logo';
  import logoDark from 'assets/logo.svg';
  
  const MobileDrawer = () => {
    const { state, dispatch } = useContext(DrawerContext);
  
    // Toggle drawer
    const toggleHandler = React.useCallback(() => {
      dispatch({
        type: 'TOGGLE',
      });
    }, [dispatch]);
  
    return (
      <Drawer
        width="320px"
        drawerHandler={
          <Box sx={styles.handler}>
            <IoMdMenu size="22px" />
          </Box>
        }
        open={state.isOpen}
        toggleHandler={toggleHandler}
        closeButton={<IoMdClose size="24px" color="#02073E" />}
        drawerStyle={styles.drawer}
        closeBtnStyle={styles.close}
      >
        <Scrollbars autoHide>
          <Box sx={styles.content}>
            <Logo image={logoDark} />
            <Box sx={styles.menu}>
              {MENU_DATA.map(({ path, label }, i) => (
                <ScrollLink
                  activeClass="active"
                  to={path}
                  spy={true}
                  smooth={true}
                  offset={10}
                  duration={500}
                  key={i}
                >
                  {label}
                </ScrollLink>
              ))}
            </Box>
          </Box>
        </Scrollbars>
      </Drawer>
    );
  };
  
  const styles = {
    handler: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexShrink: '0',
      width: '26px',
      cursor: 'pointer',
      '@media screen and (min-width: 1024px)': {
        display: 'none',
      },
    },
  
    drawer: {
      width: '100%',
      height: '100%',
      background: '#fff',
    },
  
    close: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      position: 'absolute',
      cursor: 'pointer',
      top: '36px',
      right: '30px',
      zIndex: '1',
    },
  
    content: {
      width: '100%',
      height: '100%',
      display: 'flex',
      flexDirection: 'column',
      pt: '30px',
      pb: '40px',
      px: '30px',
    },
  
    menu: {
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
      marginTop: '30px',
  
      a: {
        fontSize: '16px',
        fontWeight: '400',
        color: 'black',
        py: 2,
        cursor: 'pointer',
        transition: 'all 0.3s',
        '&:hover, &:focus': {
          color: 'primary',
        },
      },
    },
  
    menuFooter: {
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      mt: 'auto',
    },
  
    button: {
      fontSize: '15px',
      fw: '700',
      height: '48px',
      borderRadius: '3px',
      cursor: 'pointer',
      width: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      py: '0',
      backgroundColor: 'black',
      color: '#fff',
      fontFamily: 'body',
      transition: 'all 0.25s',
      '&:hover': {
        opacity: 0.85,
      },
    },
  };
  
  export default MobileDrawer;
  