Automatically go to navigation section when clicking navigation in preview

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}`)
       }

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;
   }

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,