Change component bar to popovers and adjust page layout to match

packages/builder/src/components/common/NavItem.svelte

@@ -26,7 +26,7 @@
   <div class="content">
     {#if withArrow}
       <div class:opened class="icon arrow">
-        <i class="ri-arrow-right-s-fill" />
+        <i class="ri-arrow-right-s-line" />
       </div>
     {/if}
     {#if icon}
@@ -81,6 +81,7 @@
   }
   .icon.arrow {
     margin: 0 -2px 0 -6px;
+    font-size: 12px;
   }
   .icon.arrow.opened {
     transform: rotate(90deg);

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

@@ -18,9 +18,13 @@
 <style>
   .tabs {
     display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
     list-style: none;
     font-size: var(--font-size-m);
     font-weight: 500;
+    height: 24px;
   }
 
   li {

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

@@ -2,23 +2,24 @@
   import { goto } from "@sveltech/routify"
   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 { DropdownMenu } from "@budibase/bbui"
   import Tab from "./ItemTab/Tab.svelte"
 
   const categories = components.categories
-  let selectedCategory
-  let width
+  let selectedIndex
+  let anchors = []
+  let popover
+  $: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
 
   const close = () => {
-    selectedCategory = null
+    selectedIndex = null
+    popover.hide()
   }
 
-  const onCategoryChosen = (category) => {
+  const onCategoryChosen = (category, idx) => {
     if (category.isCategory) {
-      selectedCategory = selectedCategory === category ? null : category
+      selectedIndex = idx
+      popover.show()
     } else {
       onComponentChosen(category)
     }
@@ -26,60 +27,38 @@
 
   const onComponentChosen = (component) => {
     store.addChildComponent(component._component, component.presetProps)
-
-    // Get ID path
     const path = store.getPathToComponent($store.currentComponentInfo)
-
-    // Go to correct URL
     $goto(`./:page/:screen/${path}`)
     close()
   }
 </script>
 
-<div class="wrapper">
-  <div
-    class="container"
-    bind:clientWidth={width}
-    class:open={selectedCategory != null}>
-    {#each categories as category, idx}
-      <div
-        class="category"
-        on:click={() => onCategoryChosen(category)}
-        class:active={selectedCategory === category}>
-        {#if category.icon}<i class={category.icon} />{/if}
-        <span>{category.name}</span>
-        {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
-      </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 class="container">
+  {#each categories as category, idx}
+    <div
+      bind:this={anchors[idx]}
+      class="category"
+      on:click={() => onCategoryChosen(category, idx)}>
+      {#if category.icon}<i class={category.icon} />{/if}
+      <span>{category.name}</span>
+      {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
     </div>
-  {/if}
+  {/each}
 </div>
+<DropdownMenu bind:this={popover} {anchor} align="left">
+  <Tab
+    list={categories[selectedIndex]}
+    on:selectItem={(e) => onComponentChosen(e.detail)} />
+</DropdownMenu>
 
 <style>
-  .wrapper {
-    position: relative;
-    z-index: 1;
-  }
-
   .container {
-    padding: var(--spacing-l) 40px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    background-color: white;
     z-index: 1;
-    width: calc(100% - 80px);
-    overflow: hidden;
-  }
-  .container.open {
+    height: 24px;
   }
 
   .category {
@@ -97,31 +76,10 @@
     font-weight: 500;
     user-select: none;
   }
-  .category.active,
   .category:hover {
     color: var(--ink);
   }
   .category i:not(:last-child) {
     font-size: 16px;
   }
-
-  .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;
-    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.05);
-  }
 </style>

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

@@ -12,20 +12,16 @@
 <style>
   .item-item {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     cursor: pointer;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
-    background-color: var(--grey-1);
     border-radius: 5px;
-    width: 120px;
-    height: 80px;
     color: var(--grey-7);
   }
 
   .item-item:hover {
-    background: var(--grey-2);
-    transition: all 0.3s;
+    color: var(--ink);
   }
 
   .item-icon {
@@ -36,16 +32,16 @@
   .item-text {
     display: flex;
     flex-direction: column;
-    margin-top: 5px;
   }
 
   .item-name {
-    font-size: 12px;
+    font-size: var(--font-size-xs);
     font-weight: 500;
     text-align: center;
   }
 
   i {
-    font-size: 24px;
+    font-size: 16px;
+    margin-right: 8px;
   }
 </style>

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

@@ -9,7 +9,7 @@
 
   let category = list
 
-  const handleClick = item => {
+  const handleClick = (item) => {
     if (item.children && item.children.length > 0) {
       list = item
     } else {
@@ -53,10 +53,12 @@
 
   .list {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-m);
+    align-items: stretch;
+    gap: var(--spacing-s);
     flex-wrap: wrap;
+    padding: var(--spacing-l);
+    min-width: 120px;
   }
 </style>

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -631,7 +631,7 @@ export default {
           },
         },
         {
-          name: "Groupedbar",
+          name: "Grouped Bar",
           _component: "@budibase/standard-components/groupedbar",
           description: "Groupedbar chart",
           icon: "ri-bar-chart-grouped-fill",

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

@@ -73,7 +73,7 @@
     background-color: var(--white);
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-m);
+    gap: var(--spacing-l);
     padding: var(--spacing-l) var(--spacing-xl);
     overflow-y: auto;
     border-right: 1px solid var(--grey-2);
@@ -86,13 +86,13 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-m);
+    gap: var(--spacing-l);
+    padding: var(--spacing-l) 40px var(--spacing-xl) 40px;
   }
   .preview-content {
     background: #fff;
     box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
     flex: 1 1 auto;
-    margin: var(--spacing-xl) 40px;
   }
 
   .components-pane {