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}) => {
-    if (!detail) {
-      return
-    }
-    $goto(`../${detail.heading.key}`)
+    const { key } = tabs.find(t => t.title === detail)
+    $goto(`../${key}`)
   }
 
   const updateAccessRole = event => {
@@ -68,12 +66,9 @@
 </script>
 
 <div class="title">
-  <Switcher headings={tabs} bind:value={tab} on:change={navigate}>
-    {#if tab === FrontendTypes.SCREEN}
-      <i
-        on:click={modal.show}
-        data-cy="new-screen"
-        class="ri-add-circle-fill" />
+  <Tabs {selected} on:select={navigate}>
+    <Tab title="Screens">
+      <div class="tab-content-padding">
         <div class="role-select">
           <Select
             extraThin
@@ -102,7 +97,10 @@
       <Modal bind:this={modal}>
         <NewScreenModal />
       </Modal>
-    {:else if tab === FrontendTypes.LAYOUT}
+      </div>
+    </Tab>
+    <Tab title="Layouts">
+      <div class="tab-content-padding">
         <i
         on:click={modal.show}
         data-cy="new-layout"
@@ -113,8 +111,13 @@
       <Modal bind:this={modal}>
         <NewLayoutModal />
       </Modal>
-    {/if}
-  </Switcher>
+      </div>
+    </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;
-    right: 0;
+    top: var(--spacing-l);
+    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);
   }