Add initial layouts panel and add explicit panels for theme and navigation tabs

packages/builder/src/components/design/navigation/NavigationPanel.svelte → packages/builder/src/components/design/Panel.svelte

@@ -2,20 +2,26 @@
   import { Icon, Heading } from "@budibase/bbui"
 
   export let title
+  export let icon
   export let showAddButton = false
   export let showBackButton = false
   export let showExpandIcon = false
   export let onClickAddButton
   export let onClickBackButton
+  export let borderLeft = false
+  export let borderRight = false
 
   let wide = false
 </script>
 
-<div class="navigation-panel" class:wide>
+<div class="navigation-panel" class:wide class:borderLeft class:borderRight>
   <div class="header">
     {#if showBackButton}
       <Icon name="ArrowLeft" hoverable on:click={onClickBackButton} />
     {/if}
+    {#if icon}
+      <Icon name={icon} />
+    {/if}
     <div class="title">
       <Heading size="XS">{title || ""}</Heading>
     </div>
@@ -41,13 +47,18 @@
   .navigation-panel {
     width: 280px;
     background: var(--background);
-    border-right: var(--border-light);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
     transition: width 130ms ease-out;
   }
+  .navigation-panel.border-left {
+    border-left: var(--border-light);
+  }
+  .navigation-panel.border-right {
+    border-right: var(--border-light);
+  }
   .navigation-panel.wide {
     width: 420px;
   }

packages/builder/src/components/design/settings/SettingsPanel.svelte

@@ -1,66 +0,0 @@
-<script>
-  import { Icon, Heading } from "@budibase/bbui"
-
-  export let title
-  export let icon
-</script>
-
-<div class="settings-panel">
-  {#if title}
-    <div class="header">
-      {#if icon}
-        <Icon name={icon} />
-      {/if}
-      <div class="title" {title}>
-        <Heading size="XS">{title || ""}</Heading>
-      </div>
-    </div>
-  {/if}
-  <div class="body">
-    <slot />
-  </div>
-</div>
-
-<style>
-  .settings-panel {
-    width: 280px;
-    background: var(--background);
-    border-left: var(--border-light);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-  .header {
-    flex: 0 0 48px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 0 var(--spacing-l);
-    border-bottom: var(--border-light);
-    gap: var(--spacing-m);
-  }
-  .header :global(*) {
-    color: var(--spectrum-global-color-gray-700);
-  }
-  .title {
-    flex: 1 1 auto;
-    width: 0;
-  }
-  .title :global(h1) {
-    overflow: hidden;
-    font-weight: 600;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .body {
-    flex: 1 1 auto;
-    overflow: auto;
-    overflow-x: hidden;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-</style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutNavigationPanel.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte

@@ -1,12 +1,12 @@
 <script>
-  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import { Banner, Layout } from "@budibase/bbui"
   import NavItem from "components/common/NavItem.svelte"
   import { store } from "builderStore"
   import LayoutDropdownMenu from "./LayoutDropdownMenu.svelte"
 </script>
 
-<NavigationPanel title="Layouts">
+<Panel title="Layouts" borderRight>
   <Layout paddingX="L" paddingY="XL" gap="S">
     <Banner
       type="warning"
@@ -28,7 +28,7 @@
       <LayoutDropdownMenu {layout} />
     </NavItem>
   {/each}
-</NavigationPanel>
+</Panel>
 
 <!--      -->
 <!--      color={RoleUtils.getRoleColour(screen.routing.roleId)}-->