From 4d69e8c5c2511450b0b0f200b81e79519f19e41a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 6 May 2021 15:00:35 +0100
Subject: [PATCH] Add log out and old settings to action menu from top bar
 avatar

---
 .../bbui/src/ActionMenu/ActionMenu.svelte     |  3 +-
 .../start/BuilderSettingsButton.svelte        | 15 ----------
 .../src/components/start/LogoutButton.svelte  |  6 ----
 .../builder/src/pages/portal/_layout.svelte   | 28 +++++++++++++------
 4 files changed, 22 insertions(+), 30 deletions(-)
 delete mode 100644 packages/builder/src/components/start/BuilderSettingsButton.svelte
 delete mode 100644 packages/builder/src/components/start/LogoutButton.svelte

diff --git a/packages/bbui/src/ActionMenu/ActionMenu.svelte b/packages/bbui/src/ActionMenu/ActionMenu.svelte
index 6947e69a7e..8f17f260a8 100644
--- a/packages/bbui/src/ActionMenu/ActionMenu.svelte
+++ b/packages/bbui/src/ActionMenu/ActionMenu.svelte
@@ -4,6 +4,7 @@
   import Menu from "../Menu/Menu.svelte"
 
   export let disabled = false
+  export let align = "left"
 
   let anchor
   let dropdown
@@ -31,7 +32,7 @@
 <div use:getAnchor on:click={openMenu}>
   <slot name="control" />
 </div>
-<Popover bind:this={dropdown} {anchor} align="left">
+<Popover bind:this={dropdown} {anchor} {align}>
   <Menu>
     <slot />
   </Menu>
diff --git a/packages/builder/src/components/start/BuilderSettingsButton.svelte b/packages/builder/src/components/start/BuilderSettingsButton.svelte
deleted file mode 100644
index 45712ad1b4..0000000000
--- a/packages/builder/src/components/start/BuilderSettingsButton.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  import { Button, Modal } from "@budibase/bbui"
-  import BuilderSettingsModal from "./BuilderSettingsModal.svelte"
-
-  let modal
-</script>
-
-<div>
-  <Button primary quiet icon="Settings" text on:click={modal.show}>
-    Settings
-  </Button>
-</div>
-<Modal bind:this={modal} width="30%">
-  <BuilderSettingsModal />
-</Modal>
diff --git a/packages/builder/src/components/start/LogoutButton.svelte b/packages/builder/src/components/start/LogoutButton.svelte
deleted file mode 100644
index a281bdbdc9..0000000000
--- a/packages/builder/src/components/start/LogoutButton.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<script>
-  import { Button } from "@budibase/bbui"
-  import { auth } from "stores/backend"
-</script>
-
-<Button primary quiet text icon="LogOut" on:click={auth.logout}>Log Out</Button>
diff --git a/packages/builder/src/pages/portal/_layout.svelte b/packages/builder/src/pages/portal/_layout.svelte
index 15ccfe8951..61139b3bee 100644
--- a/packages/builder/src/pages/portal/_layout.svelte
+++ b/packages/builder/src/pages/portal/_layout.svelte
@@ -8,11 +8,14 @@
     Layout,
     SideNavigation as Navigation,
     SideNavigationItem as Item,
+    ActionMenu,
+    MenuItem,
+    Modal,
   } from "@budibase/bbui"
   import ConfigChecklist from "components/common/ConfigChecklist.svelte"
   import { organisation, apps } from "stores/portal"
-  import BuilderSettingsButton from "components/start/BuilderSettingsButton.svelte"
-  import LogoutButton from "components/start/LogoutButton.svelte"
+  import { auth } from "stores/backend"
+  import BuilderSettingsModal from "components/start/BuilderSettingsModal.svelte"
 
   organisation.init()
   apps.load()
@@ -20,6 +23,7 @@
   let orgName
   let orgLogo
   let user
+  let oldSettingsModal
 
   async function getInfo() {
     // fetch orgInfo
@@ -64,24 +68,31 @@
             <Item selected={$isActive(href)} {href} {heading}>{title}</Item>
           {/each}
         </Navigation>
-        <BuilderSettingsButton />
-        <LogoutButton />
       </div>
     </Layout>
   </div>
   <div class="main">
     <div class="toolbar">
       <Search placeholder="Global search" />
-      <div class="avatar">
-        <Avatar size="M" name="John Doe" />
-        <Icon size="XL" name="ChevronDown" />
-      </div>
+      <ActionMenu align="right">
+        <div slot="control" class="avatar">
+          <Avatar size="M" name="John Doe" />
+          <Icon size="XL" name="ChevronDown" />
+        </div>
+        <MenuItem icon="Settings" on:click={oldSettingsModal.show}>
+          Settings
+        </MenuItem>
+        <MenuItem icon="LogOut" on:click={auth.logout}>Log out</MenuItem>
+      </ActionMenu>
     </div>
     <div>
       <slot />
     </div>
   </div>
 </div>
+<Modal bind:this={oldSettingsModal} width="30%">
+  <BuilderSettingsModal />
+</Modal>
 
 <style>
   .container {
@@ -130,6 +141,7 @@
     grid-template-columns: 250px auto;
     justify-content: space-between;
     padding: var(--spacing-m) calc(var(--spacing-xl) * 2);
+    align-items: center;
   }
   img {
     width: 28px;