Added context menu to the app navigation sidebar

packages/bbui/src/ActionMenu/ActionMenu.svelte

@@ -38,7 +38,7 @@
 <div use:getAnchor on:click={openMenu}>
   <slot name="control" />
 </div>
-<Popover bind:this={dropdown} {anchor} {align} {portalTarget}>
+<Popover bind:this={dropdown} {anchor} {align} {portalTarget} on:open on:close>
   <Menu>
     <slot />
   </Menu>

packages/builder/src/components/common/NavItem.svelte

@@ -71,6 +71,7 @@
   class:scrollable
   class:highlighted
   class:selectedBy
+  class:actionsOpen={highlighted && withActions}
   on:dragend
   on:dragstart
   on:dragover
@@ -168,8 +169,9 @@
     --avatars-background: var(--spectrum-global-color-gray-300);
   }
   .nav-item:hover .actions,
-  .hovering .actions {
+  .hovering .actions,
-    visibility: visible;
+  .nav-item.withActions.actionsOpen .actions {
+    opacity: 1;
   }
   .nav-item-content {
     flex: 1 1 auto;
@@ -272,7 +274,6 @@
     position: relative;
     display: grid;
     place-items: center;
-    visibility: hidden;
     order: 3;
     opacity: 0;
     width: 20px;

packages/builder/src/components/start/AppRowContext.svelte

@@ -5,11 +5,11 @@
   import DuplicateAppModal from "./DuplicateAppModal.svelte"
 
   export let app
+  export let align = "right"
 
   let deleteModal
   let exportModal
   let duplicateModal
-
   let exportPublishedVersion = false
 </script>
 
@@ -28,7 +28,7 @@
   <DuplicateAppModal appId={app.devId} appName={app.name} />
 </Modal>
 
-<ActionMenu align="right">
+<ActionMenu {align} on:open on:close>
   <div slot="control" class="icon">
     <Icon size="S" hoverable name="MoreSmallList" />
   </div>

packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte

@@ -3,8 +3,11 @@
   import { params, goto } from "@roxi/routify"
   import NavItem from "components/common/NavItem.svelte"
   import NavHeader from "components/common/NavHeader.svelte"
+  import AppRowContext from "components/start/AppRowContext.svelte"
+  import { AppStatus } from "constants"
 
   let searchString
+  let opened
 
   $: filteredApps = $apps
     .filter(app => {
@@ -13,6 +16,12 @@
         app.name.toLowerCase().includes(searchString.toLowerCase())
       )
     })
+    .map(app => {
+      return {
+        ...app,
+        deployed: app.status === AppStatus.DEPLOYED,
+      }
+    })
     .sort((a, b) => {
       const lowerA = a.name.toLowerCase()
       const lowerB = b.name.toLowerCase()
@@ -42,8 +51,20 @@
         icon={app.icon?.name || "Apps"}
         iconColor={app.icon?.color}
         selected={$params.appId === app.appId}
+        highlighted={opened == app.appId}
         on:click={() => $goto(`./${app.appId}`)}
-      />
+      >
+        <AppRowContext
+          {app}
+          align="left"
+          on:open={() => {
+            opened = app.appId
+          }}
+          on:close={() => {
+            opened = null
+          }}
+        />
+      </NavItem>
     {/each}
   </div>
 </div>