Add log out and old settings to action menu from top bar avatar

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>

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

@@ -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>

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

@@ -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>

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 { auth } from "stores/backend"
-  import LogoutButton from "components/start/LogoutButton.svelte"
+  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">
+      <ActionMenu align="right">
-        <Avatar size="M" name="John Doe" />
+        <div slot="control" class="avatar">
-        <Icon size="XL" name="ChevronDown" />
+          <Avatar size="M" name="John Doe" />
-      </div>
+          <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;