From c4b6e30391074e09db8ec19fc972fdc3e33c5889 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Mon, 26 Apr 2021 14:48:23 +0200
Subject: [PATCH] more conversion

---
 .../ScreenDropdownMenu.svelte                 | 22 ++++---------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
index c37f1c42a2..ed57e570a5 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
@@ -1,15 +1,12 @@
 <script>
   import { goto } from "@roxi/routify"
   import { store, allScreens } from "builderStore"
-  import { notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
+  import { ActionMenu, MenuItem, Icon, notifications } from "@budibase/bbui"
 
   export let screenId
 
   let confirmDeleteDialog
-  let dropdown
-  let anchor
 
   $: screen = $allScreens.find((screen) => screen._id === screenId)
 
@@ -24,18 +21,13 @@
       notifications.error("Error deleting screen")
     }
   }
-
-  const openModal = () => {
-    confirmDeleteDialog.show()
-    dropdown.hide()
-  }
 </script>
 
-<ActionMenu bind:this={dropdown}>
-  <div slot="button" class="icon" on:click={dropdown.show}>
+<ActionMenu let:open let:closeOnClick>
+  <div slot="button" class="icon" on:click={open}>
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Delete" on:click={openModal}>Delete</MenuItem>
+  <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}>Delete</MenuItem>
 </ActionMenu>
 
 <ConfirmDialog
@@ -45,9 +37,3 @@
   okText="Delete Screen"
   onOk={deleteScreen}
 />
-
-<style>
-  .icon i {
-    font-size: 16px;
-  }
-</style>