From a6b6889ef3f033b36b7cefca4bbf5c489f8dd0c4 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Fri, 15 Mar 2024 14:37:13 +0000
Subject: [PATCH] Move the layer controls to the sidebar

---
 web/src/common/TopLeftPanel.svelte | 12 ----------
 web/src/common/index.ts            |  1 -
 web/src/street-explorer/App.svelte | 36 +++++++++++++++++++++---------
 3 files changed, 26 insertions(+), 23 deletions(-)
 delete mode 100644 web/src/common/TopLeftPanel.svelte

diff --git a/web/src/common/TopLeftPanel.svelte b/web/src/common/TopLeftPanel.svelte
deleted file mode 100644
index ed7fa88a..00000000
--- a/web/src/common/TopLeftPanel.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<div><slot /></div>
-
-<style>
-  div {
-    position: absolute;
-    left: 10px;
-    top: 60px;
-    background-color: white;
-    padding: 16px;
-    outline: 1px solid black;
-  }
-</style>
diff --git a/web/src/common/index.ts b/web/src/common/index.ts
index 5ee8ec8f..40a28f6d 100644
--- a/web/src/common/index.ts
+++ b/web/src/common/index.ts
@@ -3,5 +3,4 @@ export { default as Geocoder } from "./Geocoder.svelte";
 export { default as Layout } from "./Layout.svelte";
 export { default as Map } from "./Map.svelte";
 export { default as ThemePicker } from "./ThemePicker.svelte";
-export { default as TopLeftPanel } from "./TopLeftPanel.svelte";
 export * from "./store";
diff --git a/web/src/street-explorer/App.svelte b/web/src/street-explorer/App.svelte
index e98f61b1..4c393684 100644
--- a/web/src/street-explorer/App.svelte
+++ b/web/src/street-explorer/App.svelte
@@ -3,14 +3,7 @@
   import init from "osm2streets-js";
   import { onMount } from "svelte";
   import AppSwitcher from "../AppSwitcher.svelte";
-  import {
-    ThemePicker,
-    BasemapPicker,
-    Geocoder,
-    Layout,
-    Map,
-    TopLeftPanel,
-  } from "../common";
+  import { ThemePicker, BasemapPicker, Geocoder, Layout, Map } from "../common";
   import ImportControls from "../common/import/ImportControls.svelte";
   import RenderBoundary from "../common/layers/RenderBoundary.svelte";
   import RenderIntersectionMarkings from "../common/layers/RenderIntersectionMarkings.svelte";
@@ -27,6 +20,16 @@
   onMount(async () => {
     await init();
   });
+
+  // Some of the layer contents need to be under the Map component for Svelte
+  // context to work, but the controls themselves should be in the
+  // sidebar. This trick moves the DOM node around.
+  let controlsContents: HTMLDivElement | null = null;
+  let controlsContainer: HTMLSpanElement;
+  $: if (controlsContents && controlsContainer) {
+    controlsContainer.innerHTML = "";
+    controlsContainer.appendChild(controlsContents);
+  }
 </script>
 
 <Layout>
@@ -40,13 +43,21 @@
       >
       and <a href="https://gitlab.com/LeLuxNet/Muv" target="_blank">Muv</a>.
     </p>
+
     <hr />
 
     <ImportControls />
+
+    <br />
+
+    <details open>
+      <summary>Layers</summary>
+      <div bind:this={controlsContainer} />
+    </details>
   </div>
   <div slot="main">
     <Map>
-      <TopLeftPanel>
+      <div bind:this={controlsContents}>
         <RenderBoundary />
         <RenderIntersectionPolygons>
           <Popup openOn="click" popupClass="popup" let:data let:close>
@@ -75,7 +86,7 @@
 
         <BasemapPicker />
         <ThemePicker />
-      </TopLeftPanel>
+      </div>
       <Geocoder />
     </Map>
   </div>
@@ -88,4 +99,9 @@
     max-height: 50vh;
     max-width: 30vw;
   }
+
+  details {
+    border: 1px solid black;
+    padding: 4px;
+  }
 </style>