Use the three-piece layout

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

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

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>

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