From 6749dc4f1b125a58ab408833effb9adfa99d7691 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 21 Apr 2022 15:11:07 +0100
Subject: [PATCH] Add new design side nav and update routing

---
 .../bbui/src/IconSideNav/IconSideNav.svelte   | 14 ++++
 .../src/IconSideNav/IconSideNavItem.svelte    | 55 ++++++++++++++++
 packages/bbui/src/index.js                    |  2 +
 packages/builder/src/constants/index.js       |  8 +++
 .../[assetType]/[asset]/_fallback.svelte      |  0
 .../{ => [tab]}/[assetType]/_layout.svelte    |  0
 .../{ => [tab]}/[assetType]/index.svelte      |  0
 .../[application]/design/[tab]/_layout.svelte |  2 +
 .../[application]/design/[tab]/index.svelte   |  6 ++
 .../app/[application]/design/_layout.svelte   | 64 ++++++++++++++++++-
 .../app/[application]/design/index.svelte     |  4 +-
 11 files changed, 152 insertions(+), 3 deletions(-)
 create mode 100644 packages/bbui/src/IconSideNav/IconSideNav.svelte
 create mode 100644 packages/bbui/src/IconSideNav/IconSideNavItem.svelte
 rename packages/builder/src/pages/builder/app/[application]/design/{ => [tab]}/[assetType]/[asset]/_fallback.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/{ => [tab]}/[assetType]/_layout.svelte (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/{ => [tab]}/[assetType]/index.svelte (100%)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[tab]/_layout.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[tab]/index.svelte

diff --git a/packages/bbui/src/IconSideNav/IconSideNav.svelte b/packages/bbui/src/IconSideNav/IconSideNav.svelte
new file mode 100644
index 0000000000..e0723294d2
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/bbui/src/IconSideNav/IconSideNavItem.svelte b/packages/bbui/src/IconSideNav/IconSideNavItem.svelte
new file mode 100644
index 0000000000..446e6a0e5e
--- /dev/null
+++ b/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>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 2b16f32b84..c20b0aecf6 100644
--- a/packages/bbui/src/index.js
+++ b/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"
diff --git a/packages/builder/src/constants/index.js b/packages/builder/src/constants/index.js
index abeaadc718..0316a77550 100644
--- a/packages/builder/src/constants/index.js
+++ b/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",
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/[asset]/_fallback.svelte b/packages/builder/src/pages/builder/app/[application]/design/[tab]/[assetType]/[asset]/_fallback.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[assetType]/[asset]/_fallback.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[tab]/[assetType]/[asset]/_fallback.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[tab]/[assetType]/_layout.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[tab]/[assetType]/_layout.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[tab]/[assetType]/index.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[assetType]/index.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[tab]/[assetType]/index.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[tab]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[tab]/_layout.svelte
new file mode 100644
index 0000000000..d41fc0ee34
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[tab]/_layout.svelte
@@ -0,0 +1,2 @@
+<!-- routify:options index=1 -->
+<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[tab]/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[tab]/index.svelte
new file mode 100644
index 0000000000..4c72ebe7a2
--- /dev/null
+++ b/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>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
index d41fc0ee34..b7a20f24c5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
+++ b/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 -->
-<slot />
+<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>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
index 4c72ebe7a2..5002f4d1b7 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/index.svelte
+++ b/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>