From d0414812cf6f90e6be635b2d7feeff972f28015b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 22 Aug 2023 17:51:47 +0100
Subject: [PATCH] Adjust design section page layouts to stop remounting left
 nav on screen change

---
 .../app/[application]/design/[screenId]/_layout.svelte |  2 ++
 .../[componentId]/_components/LeftPanel/index.svelte   |  9 ++++++---
 .../[screenId]/components/[componentId]/_layout.svelte | 10 ----------
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 9bc1806349..8471cc03ed 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -4,6 +4,7 @@
   import { syncURLToState } from "helpers/urlStateSync"
   import { store } from "builderStore"
   import { onDestroy } from "svelte"
+  import LeftPanel from "./components/[componentId]/_components/LeftPanel/index.svelte"
 
   $: screenId = $store.selectedScreenId
   $: store.actions.websocket.selectResource(screenId)
@@ -23,6 +24,7 @@
 
 <div class="design">
   <div class="content">
+    <LeftPanel />
     <AppPanel />
     <slot />
   </div>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
index 86c0df8cac..c1fe15f625 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/index.svelte
@@ -1,25 +1,28 @@
 <script>
   import Screens from "./Screens/index.svelte"
   import Components from "./Components/index.svelte"
+  import { selectedScreen } from "builderStore"
 </script>
 
 <div class="panel">
   <Screens />
   <div class="divider" />
-  <Components />
+  {#if $selectedScreen}
+    <Components />
+  {/if}
 </div>
 
 <style>
   .panel {
     width: 310px;
     height: 100%;
-    border-right: 2px solid var(--grey-2);
+    border-right: var(--border-light);
     display: flex;
     flex-direction: column;
     background: var(--background);
   }
 
   .divider {
-    border-bottom: 2px solid var(--grey-2);
+    border-bottom: var(--border-light);
   }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
index 807109326a..51c3c64321 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
@@ -1,5 +1,4 @@
 <script>
-  import LeftPanel from "./_components/LeftPanel/index.svelte"
   import { syncURLToState } from "helpers/urlStateSync"
   import { store, selectedScreen } from "builderStore"
   import * as routify from "@roxi/routify"
@@ -47,9 +46,6 @@
   onDestroy(stopSyncing)
 </script>
 
-<div class="left">
-  <LeftPanel />
-</div>
 {#if routeComponentId === "screen"}
   <ScreenSettingsPanel />
 {:else if routeComponentId === "navigation"}
@@ -58,9 +54,3 @@
   <ComponentSettingsPanel />
 {/if}
 <slot />
-
-<style>
-  .left {
-    order: -1;
-  }
-</style>