Update top nav to use tabs and fix a few tab layout issues

packages/bbui/src/Tabs/Tab.svelte

@@ -1,9 +1,10 @@
 <script>
-  import { getContext, onMount } from "svelte"
+  import { getContext, onMount, createEventDispatcher } from "svelte"
   import Portal from "svelte-portal"
   export let title
   export let icon = ""
 
+  const dispatch = createEventDispatcher()
   const selected = getContext("tab")
   let tab
   let tabInfo
@@ -17,11 +18,16 @@
   onMount(() => {
     setTabInfo()
   })
+
+  const onClick = () => {
+    $selected = { ...$selected, title, info: tab.getBoundingClientRect() }
+    dispatch("click")
+  }
 </script>
 
 <div
   bind:this={tab}
-  on:click={() => ($selected = { ...$selected, title, info: tab.getBoundingClientRect() })}
+  on:click={onClick}
   class:is-selected={$selected.title === title}
   class="spectrum-Tabs-item"
   tabindex="0">

packages/bbui/src/Tabs/Tabs.svelte

@@ -33,10 +33,8 @@
   function calculateIndicatorOffset() {
     if (!vertical) {
       left = $tab.info?.left - container?.getBoundingClientRect().left + "px"
-      top = $tab.info?.top
     } else {
       top = $tab.info?.top - container?.getBoundingClientRect().top + "px"
-      left = $tab.info?.left
     }
   }
 
@@ -72,6 +70,8 @@
   .spectrum-Tabs {
     padding-left: var(--spacing-xl);
     padding-right: var(--spacing-xl);
+    position: relative;
+    border-width: 1px !important;
   }
   .spectrum-Tabs-content {
     margin-top: var(--spectrum-global-dimension-static-size-150);
@@ -79,4 +79,7 @@
   .indicator-transition {
     transition: all 200ms;
   }
+  .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
+    bottom: 0 !important;
+  }
 </style>

packages/builder/src/pages/builder/[application]/_reset.svelte

@@ -1,18 +1,22 @@
 <script>
   import { store, automationStore } from "builderStore"
   import { roles } from "stores/backend"
-  import { Button, ActionGroup, ActionButton, Icon } from "@budibase/bbui"
+  import { Button, ActionGroup, ActionButton, Tabs, Tab } from "@budibase/bbui"
   import SettingsLink from "components/settings/Link.svelte"
   import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
   import FeedbackNavLink from "components/feedback/FeedbackNavLink.svelte"
   import { get } from "builderStore/api"
-  import { isActive, goto, layout } from "@roxi/routify"
+  import { isActive, goto, layout, params } from "@roxi/routify"
   import Logo from "/assets/bb-logo.svg"
+  import { capitalise } from "../../../helpers"
 
   // Get Package and set store
   export let application
 
   let promise = getPackage()
+  $: selected = capitalise(
+    $layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
+  )
 
   async function getPackage() {
     const res = await get(`/api/applications/${application}/appPackage`)
@@ -59,17 +63,20 @@
             on:click={() => $goto(`/builder/`)} />
         </button>
 
+        <div class="tabs">
+          <Tabs {selected}>
+            {#each $layout.children as { path, title }}
+              <Tab
+                quiet
+                selected={$isActive(path)}
+                on:click={topItemNavigate(path)}
+                title={capitalise(title)} />
+            {/each}
+          </Tabs>
+        </div>
+
         <!-- This gets all indexable subroutes and sticks them in the top nav. -->
-        <ActionGroup>
+        <ActionGroup />
-          {#each $layout.children as { path, title }}
-            <ActionButton
-              quiet
-              selected={$isActive(path)}
-              on:click={topItemNavigate(path)}>
-              {title}
-            </ActionButton>
-          {/each}
-        </ActionGroup>
       </div>
       <div class="toprightnav">
         <ThemeEditorDropdown />
@@ -127,9 +134,8 @@
 
   .top-nav {
     flex: 0 0 auto;
-    height: 60px;
     background: var(--background);
-    padding: 0 20px;
+    padding: 0 var(--spacing-xl);
     display: flex;
     box-sizing: border-box;
     justify-content: space-between;
@@ -146,28 +152,15 @@
 
   .topleftnav {
     display: flex;
-    place-items: center;
+    flex-direction: row;
-  }
+    justify-content: flex-start;
-
-  .topnavitem {
-    cursor: pointer;
-    color: var(--grey-5);
-    margin: 0 0 0 20px;
-    font-weight: 500;
-    font-size: var(--font-size-m);
-    height: 100%;
     align-items: center;
-    box-sizing: border-box;
   }
 
-  .topnavitem:hover {
+  .tabs {
-    color: var(--grey-7);
+    display: flex;
-    font-weight: 500;
+    position: relative;
-  }
+    margin-bottom: -1px;
-
-  .active {
-    color: var(--ink);
-    font-weight: 500;
   }
 
   .topnavitemright a {
@@ -192,9 +185,9 @@
     background-color: rgba(0, 0, 0, 0);
     cursor: pointer;
     outline: none;
-    height: 40px;
+    padding: 0 10px 0 0;
-    padding: 0px 10px 8px 0;
     align-items: center;
+    height: 32px;
   }
 
   .home-logo:active {
@@ -202,10 +195,7 @@
   }
 
   .home-logo img {
-    height: 40px;
+    height: 32px;
-  }
-  span:first-letter {
-    text-transform: capitalize;
   }
 
   i {