Scroll preview to the top to show navigation whenever editing navigation settings

packages/client/src/components/app/Layout.svelte

@@ -38,6 +38,8 @@
     "Extra small": "xs",
   }
 
+  let mobileOpen = false
+
   // Set some layout context. This isn't used in bindings but can be used
   // determine things about the current app layout.
   $: mobile = $context.device.mobile
@@ -58,7 +60,25 @@
     $context.device.width,
     $context.device.height
   )
-  let mobileOpen = false
+
+  // Scroll navigation into view if selected
+  $: {
+    if (
+      $builderStore.inBuilder &&
+      $builderStore.selectedComponentId === "navigation"
+    ) {
+      const node = document.getElementsByClassName("nav-wrapper")?.[0]
+      if (node) {
+        console.log("scroll")
+        node.style.scrollMargin = "100px"
+        node.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+          inline: "start",
+        })
+      }
+    }
+  }
 
   const isInternal = url => {
     return url.startsWith("/")
@@ -110,12 +130,20 @@
   class:mobile={!!mobile}
 >
   {#if typeClass !== "none"}
+    <div
+      class="interactive component navigation"
+      data-id="navigation"
+      data-name="Navigation"
+      data-icon="Link"
+    >
       <div
         class="nav-wrapper"
         class:sticky
         class:hidden={$routeStore.queryParams?.peek}
         class:clickable={$builderStore.inBuilder}
-      on:click={$builderStore.inBuilder ? builderStore.actions.clickNav : null}
+        on:click={$builderStore.inBuilder
+          ? builderStore.actions.clickNav
+          : null}
         style={navStyle}
       >
         <div class="nav nav--{typeClass} size--{navWidthClass}">
@@ -183,6 +211,7 @@
           {/if}
         </div>
       </div>
+    </div>
   {/if}
   <div class="main-wrapper">
     <div class="main size--{pageWidthClass}">
@@ -193,6 +222,9 @@
 
 <style>
   /*  Main components */
+  .component {
+    display: contents;
+  }
   .layout {
     display: flex;
     flex-direction: column;