Add initial work on dropdown components

packages/builder/src/budibase.css

@@ -85,14 +85,6 @@
      box-sizing: border-box; 
 }
 
-.preview-pane {
-    grid-column: 2;
-    margin: 80px 60px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
-}
-
 .budibase__table {
     border: 1px solid var(--grey-4);
     background: #fff;

packages/builder/src/components/userInterface/ComponentSelectionList.svelte

@@ -3,46 +3,111 @@
   import { store } from "builderStore"
   import components from "./temporaryPanelStructure.js"
   import CategoryTab from "./CategoryTab.svelte"
+  import { Popover } from "@budibase/bbui"
+  import { fade, fly } from "svelte/transition"
 
   import Tab from "./ItemTab/Tab.svelte"
 
-  export let toggleTab
-
   const categories = components.categories
-  let selectedCategory = categories[0]
+  let selectedIndex
+  let width
+  $: selectedCategory = selectedIndex == null ? null : categories[selectedIndex]
+
+  const close = () => {
+    selectedIndex = null
+  }
 
   const onComponentChosen = component => {
     store.addChildComponent(component._component, component.presetProps)
 
-    toggleTab("Navigate")
-
     // Get ID path
     const path = store.getPathToComponent($store.currentComponentInfo)
 
     // Go to correct URL
     $goto(`./:page/:screen/${path}`)
+    close()
   }
 </script>
 
-<div class="root">
+<div class="wrapper">
-  <CategoryTab
+  <div
-    onClick={category => (selectedCategory = category)}
+    class="container"
-    {selectedCategory}
+    bind:clientWidth={width}
-    {categories} />
+    class:border={selectedCategory == null}>
-
+    {#each categories as category, idx}
-  <div class="panel">
+      <div
-    <Tab
+        class="category"
-      list={selectedCategory}
+        on:click={() => (selectedIndex = idx)}
-      on:selectItem={e => onComponentChosen(e.detail)}
+        class:active={selectedCategory === category}>
-      {toggleTab} />
+        {category.name}
+        <i class="ri-arrow-down-s-line" />
+      </div>
+    {/each}
   </div>
+  {#if selectedCategory != null}
+    <div class="overlay" on:click={close} />
+    <div class="dropdown" transition:fly={{ y: -120 }}>
+      <Tab
+        list={selectedCategory}
+        on:selectItem={e => onComponentChosen(e.detail)} />
+    </div>
+  {/if}
 </div>
 
 <style>
-  .panel {
+  .wrapper {
-    margin-top: 20px;
+    position: relative;
-    display: grid;
+    z-index: 1;
-    grid-template-columns: 1fr 1fr;
+  }
-    grid-gap: 20px;
+
+  .container {
+    padding: var(--spacing-xl) 40px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    background-color: white;
+    z-index: 1;
+  }
+  .container.border {
+    border-bottom: 1px solid var(--grey-2);
+  }
+
+  .category {
+    color: var(--ink);
+    cursor: pointer;
+    margin-right: var(--spacing-xl);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+    font-size: var(--font-size-s);
+    font-weight: 500;
+  }
+  .category.active,
+  .category:hover {
+    color: var(--blue);
+  }
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -2;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  .dropdown {
+    position: absolute;
+    z-index: -1;
+    top: calc(100% - var(--spacing-xl));
+    left: 0;
+    width: calc(100% - 80px);
+    background-color: white;
+    padding: var(--spacing-xl) 40px;
+    border-bottom: 1px solid var(--grey-2);
+    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.05);
   }
 </style>

packages/builder/src/components/userInterface/FrontendNavigatePane.svelte

@@ -4,19 +4,17 @@
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
   import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
-  import { Button, Spacer, Modal } from "@budibase/bbui"
+  import { Button, Spacer, Modal, Heading } from "@budibase/bbui"
 
   let modal
 </script>
 
+<Heading small>Screens</Heading>
 <PagesList />
 
-<Spacer medium />
 <Button primary wide on:click={modal.show}>Create New Screen</Button>
-<Spacer medium />
-<PageLayout layout={$store.pages[$store.currentPageName]} />
-
 <div class="nav-items-container">
+  <PageLayout layout={$store.pages[$store.currentPageName]} />
   <ComponentsHierarchy screens={$store.screens} />
 </div>
 

packages/builder/src/components/userInterface/ItemTab/Item.svelte

@@ -14,12 +14,12 @@
     display: flex;
     flex-direction: column;
     cursor: pointer;
-    padding: 12px 16px 16px 16px;
-    height: 80px;
     justify-content: center;
     align-items: center;
     background-color: var(--grey-1);
     border-radius: 5px;
+    width: 120px;
+    height: 80px;
   }
 
   .item-item:hover {

packages/builder/src/components/userInterface/ItemTab/Tab.svelte

@@ -25,11 +25,13 @@
 {#if !list.isCategory}
   <button class="back-button" on:click={goBack}>Back</button>
 {/if}
-{#each list.children as item}
+<div class="list">
-  {#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
+  {#each list.children as item}
-    <Item {item} on:click={() => handleClick(item)} />
+    {#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
-  {/if}
+      <Item {item} on:click={() => handleClick(item)} />
-{/each}
+    {/if}
+  {/each}
+</div>
 
 <style>
   .back-button {
@@ -45,8 +47,16 @@
     font-family: Inter;
     transition: all 0.3ms;
   }
-
   .back-button:hover {
     background: var(--grey-1);
   }
+
+  .list {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+    flex-wrap: wrap;
+  }
 </style>

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

@@ -32,8 +32,6 @@
     settingsView.show()
   }
 
-  let leftNavSwitcher
-
   const lastPartOfName = c => (c ? last(c.split("/")) : "")
 </script>
 
@@ -41,21 +39,15 @@
 <div class="root">
 
   <div class="ui-nav">
-
+    <FrontendNavigatePane />
-    <Switcher bind:this={leftNavSwitcher} tabs={['Navigate', 'Add']}>
-      <div slot="0">
-        <FrontendNavigatePane />
-      </div>
-      <div slot="1">
-        <ComponentSelectionList toggleTab={leftNavSwitcher.selectTab} />
-      </div>
-    </Switcher>
-
   </div>
 
   <div class="preview-pane">
     {#if $store.currentPageName && $store.currentPageName.length > 0}
-      <CurrentItemPreview />
+      <ComponentSelectionList/>
+      <div class="preview-content">
+        <CurrentItemPreview />
+      </div>
     {/if}
   </div>
 
@@ -73,34 +65,42 @@
   .root {
     display: grid;
     grid-template-columns: 300px 1fr 300px;
-    width: 100%;
     background: var(--grey-1);
-    flex: 1;
-    min-height: 0;
     align-items: stretch;
+    height: calc(100vh - 60px);
   }
 
   .ui-nav {
     grid-column: 1;
     background-color: var(--white);
-    height: calc(100vh - 69px);
-    padding: 0;
     display: flex;
     flex-direction: column;
+    gap: var(--spacing-m);
+    padding: var(--spacing-xl);
+    overflow-y: auto;
+    border-right: 1px solid var(--grey-2);
   }
 
   .preview-pane {
     grid-column: 2;
-    margin: 40px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-m);
+  }
+  .preview-content {
     background: #fff;
-    border-radius: 5px;
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
+    flex: 1 1 auto;
+    margin: var(--spacing-xl) 40px;
   }
 
   .components-pane {
     grid-column: 3;
     background-color: var(--white);
-    min-height: 0px;
+    border-left: 1px solid var(--grey-2);
-    height: calc(100vh - 69px);
   }
 
   .nav-group-header > div:nth-child(1) {