Stylize the Reach UI Dropdown Menu

[bradwestfall]

The Reach UI dropdown used when you click on the avatar in the primary header needs to be stylized

[cassidoo]

I started this and pushed what I have (just super minor stuff rn). It sounds like @chancestrickland is working on adding some kind of positioning thing to Menu stuff (reach/reach-ui#168), which seems like it'll be helpful for this!

[bradwestfall]

Are you going to hold on this until we see if Chance gets this in place in the next few weeks?

[chaance]

FYI, waiting on Ryan to review my PR but it should give you the flexibility you need for this.

[chaance]

@cassidoo In v0.7.0 you can use a position prop on the MenuPopover like this:

// you can check out the positioning functions in @reach/popover if you want to
// inject your own logic, but there are a few functions here already that might give
// you what you need
import { positionMatchWidth } from "@reach/popover";

function MyMenu() {
  return (
    <Menu>
      <MenuButton id="example-button">
        Actions <span aria-hidden="true">▾</span>
      </MenuButton>
      <MenuPopover position={positionMatchWidth}>
        <MenuItems>
          <MenuItem onSelect={action("Download")}>Download</MenuItem>
          <MenuItem onSelect={action("Copy")}>Create a Copy</MenuItem>
          <MenuItem onSelect={action("Mark as Draft")}>Mark as Draft</MenuItem>
          <MenuItem onSelect={action("Delete")}>Delete</MenuItem>
        </MenuItems>
      </MenuPopover>
    </Menu>
  )
}