Dropdown menu component

[sarahscott]

Fixes #193 & #194

• Generalize ProjectTopbar (& associated Menu) into Topbar that can be used in other contexts
• Fix hover highlighting on Menu buttons (icons were turning purple but text was not)
• Add an AdditionalActionsDropdown to Design System Guide:
  

[rudolfs]

Nice work!! 🔥

add an icon-only button (right now, Button accommodates icon + text buttons but not icons on their own)

I'd just make the whole dropdown component include a with a vanilla html <button> and add all the styling and functionality in there, as I don't see that we'd reuse this at the moment. We can always extract later when we see duplication.

Here's some points on the code itself (couldn't inline my comments as Github seems to have some service outage atm):

• So far we've been initialising all props with null unless they come with a default value or the prop is a boolean. Is there any reason to break that convention?

export let menuItems = [];
export let items = [];

• Perhaps we should extract the "loose" pattern matching argument into

const topbarMenuItems = projectId => [
    {
      icon: Icon.Source,
      title: "Source",
      href: path.projectSource(projectId)
      looseActiveStateMatching: true
    },

active={path.active(item.href, $location, item.looseActiveStateMatching)} />

instead of

active={path.active(item.href, $location, i === 0)} />

In ui/Screen/Project.svelte L101-117: why do we need to wrap everything in ? It seems to render just fine without, when I remove it.

[rudolfs]

Getting close!! 🌟

As for next steps: For the sake of keeping things moving fast, I would suggest we narrow the scope this PR to just making this a generic dropdown menu component and adding it to the design system guide. Then we can follow up with another PR for the specific use-cases (top bar, project and member lists) and the copy-to-clipboard functionality.

[rudolfs]

It's coming together! 🎉

Besides the inline comments:

• can we automatically close the dropdown menu once something is clicked?
• clicking outside of the modal to close it works only if I click above the menu, if I click on either side or below it doesn't close, is there an easy fix?

[MeBrei]

Great work!
Added a few small comments.

[sarahscott]

@MeBrei @rudolfs does this make sense here or in global.css?

[MeBrei]

color.css will be overwritten once you run yarn generate:colors the next time. I would put it in general.css for now, but maybe write an issue in the Housekeeping milestone to include transparent colors in the color generation.

[rudolfs]

colors.css is auto-generated and will be overwritten next time someone runs yarn generate:colors.

Let's put this CSS variable in public/global.css for now.
I also think --color-lightgray-transparency-08 would better fit our current naming scheme.

[rudolfs]

Could you also use the variable here: https://github.com/radicle-dev/radicle-upstream/blob/master/ui/DesignSystem/Component/Sidebar.svelte#L90 while at it?

[rudolfs]

LGTM 🚀