From 899a1dd7547497f77819a7dc41c68161f6802681 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 15:00:26 +0100
Subject: [PATCH] Restore being able to select the screen and nav, now with
 unique IDs

---
 .../client/src/components/app/Layout.svelte   | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 089ce8e7de..3d9668ea97 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -72,6 +72,12 @@
     $context.device.height
   )
   $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open
+  $: screenId = $builderStore.inBuilder
+    ? `${$builderStore.screen?._id}-screen`
+    : "screen"
+  $: navigationId = $builderStore.inBuilder
+    ? `${$builderStore.screen?._id}-navigation`
+    : "navigation"
 
   // Scroll navigation into view if selected.
   // Memoize into a primitive to avoid spamming this whenever builder store
@@ -145,27 +151,29 @@
     }
     return style
   }
+
+  $: console.log($builderStore.selectedComponentId)
 </script>
 
 <div
-  class="component screen layout layout--{typeClass}"
+  class="component {screenId} layout layout--{typeClass}"
   use:styleable={$component.styles}
   class:desktop={!mobile}
   class:mobile={!!mobile}
-  data-id={`${$builderStore.screen?._id}-screen`}
+  data-id={screenId}
   data-name="Screen"
   data-icon="WebPage"
 >
-  <div class="screen-dom screen-wrapper layout-body">
+  <div class="{screenId}-dom screen-wrapper layout-body">
     {#if typeClass !== "none"}
       <div
-        class="interactive component navigation"
-        data-id="navigation"
+        class="interactive component {navigationId}"
+        data-id={navigationId}
         data-name="Navigation"
         data-icon="Visibility"
       >
         <div
-          class="nav-wrapper navigation-dom"
+          class="nav-wrapper {navigationId}-dom"
           class:sticky
           class:hidden={$routeStore.queryParams?.peek}
           class:clickable={$builderStore.inBuilder}