Add new design side nav and update routing

packages/bbui/src/IconSideNav/IconSideNav.svelte

@@ -0,0 +1,14 @@
+<div class="icon-side-nav">
+  <slot/>
+</div>
+
+<style>
+  .icon-side-nav {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      padding: var(--spacing-s);
+      gap: var(--spacing-xs);
+  }
+</style>

packages/bbui/src/IconSideNav/IconSideNavItem.svelte

@@ -0,0 +1,55 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import { fade } from "svelte/transition"
+
+  export let icon
+  export let active = false
+  export let tooltip
+
+  let showTooltip = false
+</script>
+
+<div
+  class="icon-side-nav-item"
+  class:active
+  on:mouseover={() => (showTooltip = true)}
+  on:focus={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
+  on:click
+>
+  <Icon name={icon} hoverable />
+  {#if tooltip && showTooltip}
+    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
+      <Tooltip textWrapping direction="right" text={tooltip} />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .icon-side-nav-item {
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: 4px;
+    position: relative;
+    cursor: pointer;
+  }
+  .icon-side-nav-item:hover :global(svg),
+  .active :global(svg) {
+    color: white;
+  }
+  .active {
+    background-color: var(--spectrum-global-color-gray-200);
+  }
+  .tooltip {
+    position: absolute;
+    pointer-events: none;
+    left: calc(100% - 4px);
+    top: 50%;
+    white-space: nowrap;
+    transform: translateY(-50%);
+    z-index: 1;
+  }
+</style>

packages/bbui/src/index.js

@@ -64,6 +64,8 @@ export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
 export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
 export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
 export { default as RichTextField } from "./Form/RichTextField.svelte"
+export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
+export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
 
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"

packages/builder/src/constants/index.js

@@ -2,6 +2,14 @@ export const TableNames = {
   USERS: "ta_users",
 }
 
+export const DesignTabs = {
+  SCREENS: "screens",
+  COMPONENTS: "components",
+  THEME: "theme",
+  NAVIGATION: "navigation",
+  LAYOUTS: "layouts",
+}
+
 export const FrontendTypes = {
   PAGE: "page",
   SCREEN: "screen",

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

@@ -0,0 +1,2 @@
+<!-- routify:options index=1 -->
+<slot />

packages/builder/src/pages/builder/app/[application]/design/[tab]/index.svelte

@@ -0,0 +1,6 @@
+<script>
+  import { goto } from "@roxi/routify"
+  import { FrontendTypes } from "constants"
+
+  $goto(`./${FrontendTypes.SCREEN}`)
+</script>

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

@@ -1,2 +1,64 @@
+<script>
+  import { IconSideNav, IconSideNavItem } from "@budibase/bbui"
+  import { params, goto } from "@roxi/routify"
+  import { DesignTabs } from "constants"
+</script>
+
 <!-- routify:options index=1 -->
+<div class="design">
+  <div class="side-nav">
+    <IconSideNav>
+      <IconSideNavItem
+        icon="WebPage"
+        tooltip="Screens"
+        active={$params.tab === DesignTabs.SCREENS}
+        on:click={() => $goto(`./${DesignTabs.SCREENS}`)}
+      />
+      <IconSideNavItem
+        icon="ViewList"
+        tooltip="Components"
+        active={$params.tab === DesignTabs.COMPONENTS}
+        on:click={() => $goto(`./${DesignTabs.COMPONENTS}`)}
+      />
+      <IconSideNavItem
+        icon="Brush"
+        tooltip="Theme"
+        active={$params.tab === DesignTabs.THEME}
+        on:click={() => $goto(`./${DesignTabs.THEME}`)}
+      />
+      <IconSideNavItem
+        icon="Link"
+        tooltip="Navigation"
+        active={$params.tab === DesignTabs.NAVIGATION}
+        on:click={() => $goto(`./${DesignTabs.NAVIGATION}`)}
+      />
+      <IconSideNavItem
+        icon="Experience"
+        tooltip="Layouts"
+        active={$params.tab === DesignTabs.LAYOUTS}
+        on:click={() => $goto(`./${DesignTabs.LAYOUTS}`)}
+      />
+    </IconSideNav>
+  </div>
+
+  <div class="content">
     <slot />
+  </div>
+</div>
+
+<style>
+  .design {
+    flex: 1 1 auto;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: stretch;
+  }
+  .side-nav {
+    background: var(--background);
+    border-right: var(--border-light);
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+  }
+</style>

packages/builder/src/pages/builder/app/[application]/design/index.svelte

@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@roxi/routify"
-  import { FrontendTypes } from "constants"
+  import { DesignTabs } from "constants"
 
-  $goto(`./${FrontendTypes.SCREEN}`)
+  $goto(`./${DesignTabs.SCREENS}`)
 </script>