From 85a619c6ea9c1c1b818df5138a1130e04583caf2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 6 May 2022 13:59:16 +0100
Subject: [PATCH] Automatically go to navigation section when clicking
 navigation in preview

---
 .../design/[screenId]/_components/AppPreview.svelte       | 4 ++++
 packages/client/src/components/app/Layout.svelte          | 8 ++++++++
 packages/client/src/stores/builder.js                     | 4 ++++
 3 files changed, 16 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 0c8cadff45..a9b344ce41 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -182,6 +182,10 @@
           store.actions.components.copy(source, true)
           await store.actions.components.paste(destination, data.mode)
         }
+      } else if (type === "click-nav") {
+        if (!$isActive("./navigation")) {
+          $goto("./navigation")
+        }
       } else {
         console.warn(`Client sent unknown event type: ${type}`)
       }
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 298ad34466..0aa65474d3 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -121,6 +121,8 @@
       class="nav-wrapper"
       class:sticky
       class:hidden={isPeeking}
+      class:clickable={$builderStore.inBuilder}
+      on:click={$builderStore.inBuilder ? builderStore.actions.clickNav : null}
       style={navStyle}
     >
       <div class="nav nav--{typeClass} size--{navWidthClass}">
@@ -221,6 +223,12 @@
     border-bottom: 1px solid var(--spectrum-global-color-gray-300);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
   }
+  .nav-wrapper.clickable {
+    cursor: pointer;
+  }
+  .nav-wrapper.clickable .nav {
+    pointer-events: none;
+  }
   .nav-wrapper.hidden {
     display: none;
   }
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index ae6e5db74b..742419048b 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -76,6 +76,10 @@ const createBuilderStore = () => {
       }
       store.update(state => ({ ...state, editMode: enabled }))
     },
+    clickNav: () => {
+      console.log("click nav")
+      dispatchEvent("click-nav")
+    },
   }
   return {
     ...store,