You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

78 lines
1.7 KiB

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}
/>
);