hexbear-frontend/src/components/MenuButton.tsx

import React from 'react';

import {
  Menu as ReachMenu,
  MenuList as ReachMenuList,
  MenuButton as ReachMenuButton,
  MenuItem as ReachMenuItem,
  MenuItems as ReachMenuItems,
  MenuPopover as ReachMenuPopover,
  MenuLink as ReachMenuLink,
  useMenuButtonContext,
} from '@reach/menu-button';
// import '@reach/menu-button/styles.css';
import { Box, Button, Flex } from 'theme-ui';
import Block from './elements/Block';

export const Menu = props => <Box as={ReachMenu} {...props} />;

export const MenuButton = props => <Button as={ReachMenuButton} {...props} />;

export const MenuList = props => (
  <Block
    bg="background"
    position="relative"
    css={{
      borderRadius: '4px',
      border: 0,
      '::after': {
        content: `''`,
        boxShadow: '0 0 0 1px rgba(0,0,0,.05)',
        borderRadius: '4px',
        position: 'absolute',
        top: 0,
        width: '100%',
        height: '100%',
        // height: 'calc(100% - 8px)',
        pointerEvents: 'none',
      },
    }}
    boxShadow="0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05)"
    color="text"
    mt="8px"
    py={2}
    as={ReachMenuList}
    {...props}
  />
);

export const MenuItem = props => {
  const context = useMenuButtonContext();

  console.log({ context });
  return (
    <Flex
      px={3}
      py="5px"
      css={{
        alignItems: 'center',
        '[data-selected]': { backgroundColor: 'red' },
      }}
      as={ReachMenuItem}
      {...props}
    />
  );
};

export const MenuLink = props => (
  <Flex
    px={3}
    css={{
      alignItems: 'center',
      textDecoration: 'none',
      ':hover': { textDecoration: 'none' },
    }}
    as={ReachMenuLink}
    {...props}
  />
);