From 62f9a7ebad73e9dd5a72f2dff707dfaec7184f6c Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Wed, 4 Sep 2024 17:17:24 +0100
Subject: [PATCH] Use the three-piece layout

---
 web/src/App.svelte            |  8 +++--
 web/src/EdgeCostApp.svelte    |  6 ++--
 web/src/Header.svelte         | 60 ++++++++++++++++++++---------------
 web/src/InteractiveApp.svelte |  6 ++--
 web/src/Layout.svelte         | 30 ------------------
 5 files changed, 48 insertions(+), 62 deletions(-)
 delete mode 100644 web/src/Layout.svelte

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 7f12772..278cf79 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -9,7 +9,7 @@
   import { type LayersControls } from "./common";
   import Header from "./Header.svelte";
   import Layers from "./Layers.svelte";
-  import Layout from "./Layout.svelte";
+  import { Layout } from "svelte-utils/top_bar_layout";
   import Loader from "./Loader.svelte";
   import SidebarControls from "./SidebarControls.svelte";
 
@@ -51,8 +51,10 @@
 </script>
 
 <Layout>
-  <div slot="left">
+  <div slot="top">
     <Header app="main" />
+  </div>
+  <div slot="left">
     <label>
       {#if pmtiles == null}
         Open a <i>.pmtiles</i>
@@ -83,7 +85,7 @@
       <SidebarControls {outputMetadata} {map} bind:controls />
     {/if}
   </div>
-  <div slot="main" style="position:relative; width: 100%; height: 100vh;">
+  <div slot="main" style="position:relative; width: 100%; height: 100%;">
     <MapLibre
       style="https://api.maptiler.com/maps/dataviz/style.json?key=MZEJTanw3WpxRvt7qDfo"
       standardControls
diff --git a/web/src/EdgeCostApp.svelte b/web/src/EdgeCostApp.svelte
index 531046f..462cec4 100644
--- a/web/src/EdgeCostApp.svelte
+++ b/web/src/EdgeCostApp.svelte
@@ -26,7 +26,7 @@
   } from "./common";
   import CostFunction from "./CostFunction.svelte";
   import Header from "./Header.svelte";
-  import Layout from "./Layout.svelte";
+  import { Layout } from "svelte-utils/top_bar_layout";
   import { Popup, makeColorRamp } from "svelte-utils/map";
   import {
     Loading,
@@ -211,8 +211,10 @@
 </script>
 
 <Layout>
-  <div slot="left">
+  <div slot="top">
     <Header app="costs" />
+  </div>
+  <div slot="left">
     <label>
       Open an <i>.osm.pbf</i>
       file
diff --git a/web/src/Header.svelte b/web/src/Header.svelte
index f5bee65..71db4dc 100644
--- a/web/src/Header.svelte
+++ b/web/src/Header.svelte
@@ -5,36 +5,46 @@
   // TODO Merge apps into one page, or detect what the user's loading?
   export let app: string;
 
-  let show = false;
-
-  function switchApp() {
-    if (app == "main") {
-      window.location.href = "index.html";
-    } else if (app == "interactive") {
-      window.location.href = "interactive.html";
-    } else if (app == "costs") {
-      window.location.href = "edge_cost.html";
-    }
-  }
+  let showAbout = false;
 </script>
 
-<div style="display: flex; justify-content: space-between">
-  <img src={logoUrl} width="100" alt="od2net logo by Hadrien Salat" />
+<div style="display: flex">
+  <button class="outline" on:click={() => (showAbout = true)}>
+    <img src={logoUrl} width="100" alt="od2net logo by Hadrien Salat" />
+  </button>
 
-  <select bind:value={app} on:change={switchApp}>
-    <option value="main">Pre-built route networks</option>
-    <option value="interactive">Interactively generate route networks</option>
-    <option value="costs">Explore edge costs</option>
-  </select>
+  <nav>
+    <ul>
+      <li>
+        <button
+          on:click={() => (window.location.href = "index.html")}
+          disabled={app == "main"}
+        >
+          Pre-built route networks
+        </button>
+      </li>
+      <li>
+        <button
+          on:click={() => (window.location.href = "interactive.html")}
+          disabled={app == "interactive"}
+        >
+          Interactively generate route networks
+        </button>
+      </li>
+      <li>
+        <button
+          on:click={() => (window.location.href = "edge_cost.html")}
+          disabled={app == "costs"}
+        >
+          Explore edge costs
+        </button>
+      </li>
+    </ul>
+  </nav>
 </div>
 
-<button on:click={() => (show = true)}>About</button>
-
-<br />
-<br />
-
-{#if show}
-  <Modal on:close={() => (show = false)} let:dialog>
+{#if showAbout}
+  <Modal on:close={() => (showAbout = false)} let:dialog>
     <div style="display: flex; justify-content: space-between">
       <h1>About od2net</h1>
       <button on:click={() => dialog.close()}>Close</button>
diff --git a/web/src/InteractiveApp.svelte b/web/src/InteractiveApp.svelte
index eb81578..f63f95e 100644
--- a/web/src/InteractiveApp.svelte
+++ b/web/src/InteractiveApp.svelte
@@ -13,7 +13,7 @@
   import CostFunction from "./CostFunction.svelte";
   import Header from "./Header.svelte";
   import Layers from "./Layers.svelte";
-  import Layout from "./Layout.svelte";
+  import { Layout } from "svelte-utils/top_bar_layout";
   import { Loading } from "svelte-utils";
   import { OverpassSelector } from "svelte-utils/overpass";
   import SidebarControls from "./SidebarControls.svelte";
@@ -111,8 +111,10 @@
 </script>
 
 <Layout>
-  <div slot="left">
+  <div slot="top">
     <Header app="interactive" />
+  </div>
+  <div slot="left">
     <label>
       Open an <i>.osm.pbf</i>
       file
diff --git a/web/src/Layout.svelte b/web/src/Layout.svelte
deleted file mode 100644
index 7fb1946..0000000
--- a/web/src/Layout.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<div class="left">
-  <slot name="left" />
-</div>
-<div class="main">
-  <slot name="main" />
-</div>
-
-<style>
-  * {
-    box-sizing: border-box;
-  }
-
-  :global(body) {
-    margin: 0px;
-  }
-
-  div {
-    float: left;
-  }
-
-  .left {
-    width: 25%;
-    height: 100vh;
-    overflow: scroll;
-    padding: 8px;
-  }
-  .main {
-    width: 75%;
-  }
-</style>