budibase/packages/builder/src/common/DropdownButton.svelte

<script>
  import getIcon from "./icon"
  export let iconName
  export let actions = [] // [ {label: "Action Name", onclick: () => {...} } ]
  let isDroppedDown = false
</script>

<div class="root" on:click={() => (isDroppedDown = !isDroppedDown)}>
  {@html getIcon(iconName)}

  <div
    class="dropdown-background"
    on:click|stopPropagation={() => (isDroppedDown = false)}
    style="display: {isDroppedDown ? 'block' : 'none'}" />

  <div
    class="dropdown-content"
    style="display: {isDroppedDown ? 'inline-block' : 'none'}">
    {#each actions as action}
      <div class="budibase__nav-item" on:click={action.onclick}>
        {action.label}
      </div>
    {/each}
  </div>

</div>

<style>
  .dropdown-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }

  .root {
    cursor: pointer;
    z-index: 1;
  }

  .dropdown-content {
    position: absolute;
    background-color: var(--white);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    font-weight: normal;
    border-style: solid;
    border-width: 1px;
    border-color: var(--secondary10);
  }

  .dropdown-content:not(:focus) {
    display: none;
  }

  .action-row {
    padding: 7px 10px;
    cursor: pointer;
  }

  .action-row:hover {
    background-color: var(--primary100);
    color: var(--white);
  }
</style>