adds tab to left sidebar on design section

packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte

@@ -13,7 +13,7 @@
   import Layout from "components/design/NavigationPanel/Layout.svelte"
   import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
   import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
-  import { Modal, Switcher, Select, Input } from "@budibase/bbui"
+  import { Modal, Switcher, Select, Input, Tabs, Tab } from "@budibase/bbui"
 
   const tabs = [
     {
@@ -28,13 +28,11 @@
 
   let modal
   let routes = {}
-  $: tab = $params.assetType
+  $: selected = tabs.find(t => t.key === $params.assetType).title
 
-  const navigate = ({ detail }) => {
+  const navigate = ({detail}) => {
-    if (!detail) {
+    const { key } = tabs.find(t => t.title === detail)
-      return
+    $goto(`../${key}`)
-    }
-    $goto(`../${detail.heading.key}`)
   }
 
   const updateAccessRole = event => {
@@ -68,33 +66,30 @@
 </script>
 
 <div class="title">
-  <Switcher headings={tabs} bind:value={tab} on:change={navigate}>
+  <Tabs {selected} on:select={navigate}>
-    {#if tab === FrontendTypes.SCREEN}
+    <Tab title="Screens">
-      <i
+      <div class="tab-content-padding">
-        on:click={modal.show}
+        <div class="role-select">
-        data-cy="new-screen"
+          <Select
-        class="ri-add-circle-fill" />
-      <div class="role-select">
-        <Select
-          extraThin
-          secondary
-          on:change={updateAccessRole}
-          value={$selectedAccessRole}
-          label="Filter by Access">
-          {#each $roles as role}
-            <option value={role._id}>{role.name}</option>
-          {/each}
-        </Select>
-        <div class="search-screens">
-          <Input
             extraThin
-            placeholder="Enter a route to search"
+            secondary
-            label="Search Screens"
+            on:change={updateAccessRole}
-            bind:value={$screenSearchString} />
+            value={$selectedAccessRole}
-          <i
+            label="Filter by Access">
-            class="ri-close-line"
+            {#each $roles as role}
-            on:click={() => ($screenSearchString = null)} />
+              <option value={role._id}>{role.name}</option>
-        </div>
+            {/each}
+          </Select>
+          <div class="search-screens">
+            <Input
+              extraThin
+              placeholder="Enter a route to search"
+              label="Search Screens"
+              bind:value={$screenSearchString} />
+            <i
+              class="ri-close-line"
+              on:click={() => ($screenSearchString = null)} />
+          </div>
       </div>
       <div class="nav-items-container">
         <ComponentNavigationTree />
@@ -102,8 +97,11 @@
       <Modal bind:this={modal}>
         <NewScreenModal />
       </Modal>
-    {:else if tab === FrontendTypes.LAYOUT}
+      </div>
-      <i
+    </Tab>
+    <Tab title="Layouts">
+      <div class="tab-content-padding">
+        <i
         on:click={modal.show}
         data-cy="new-layout"
         class="ri-add-circle-fill" />
@@ -113,8 +111,13 @@
       <Modal bind:this={modal}>
         <NewLayoutModal />
       </Modal>
-    {/if}
+      </div>
-  </Switcher>
+    </Tab>
+  </Tabs>
+  <i
+    on:click={modal.show}
+    data-cy="new-screen"
+    class="ri-add-circle-fill" />
 </div>
 
 <style>
@@ -128,8 +131,8 @@
   .title i {
     font-size: 20px;
     position: absolute;
-    top: 0;
+    top: var(--spacing-l);
-    right: 0;
+    right: var(--spacing-l);
   }
   .title i:hover {
     cursor: pointer;
@@ -145,6 +148,10 @@
     gap: var(--spacing-m);
   }
 
+  .tab-content-padding {
+    padding: 0 var(--spacing-s);
+  }
+
   .search-screens {
     position: relative;
   }

packages/builder/src/pages/builder/[application]/data/_layout.svelte

@@ -105,7 +105,7 @@
     font-size: 20px;
     position: absolute;
     top: var(--spacing-l);
-    right: var(--spacing-xl);
+    right: var(--spacing-l);
   }
 
   i:hover {

packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte

@@ -177,7 +177,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacing-l);
-    padding: var(--spacing-l) var(--spacing-xl) 60px var(--spacing-xl);
+    padding: 0 0 60px 0;
     overflow-y: auto;
     border-right: var(--border-light);
   }