Start a top bar for nav. Far from perfect, but looking much better! #15

Author: dabreegster

web/assets/logo.png

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import logo from "../assets/logo.png?url";
   import "@picocss/pico/css/pico.min.css";
   import initLtn from "backend";
   import type { Map } from "maplibre-gl";
@@ -15,6 +16,7 @@
   import {
     app,
     mapContents,
+    topContents,
     map as mapStore,
     mode,
     sidebarContents,
@@ -42,8 +44,13 @@
     );
   }
 
+  let topDiv: HTMLDivElement;
   let sidebarDiv: HTMLDivElement;
   let mapDiv: HTMLDivElement;
+  $: if (topDiv && $topContents) {
+    topDiv.innerHTML = "";
+    topDiv.appendChild($topContents);
+  }
   $: if (sidebarDiv && $sidebarContents) {
     sidebarDiv.innerHTML = "";
     sidebarDiv.appendChild($sidebarContents);
@@ -55,6 +62,14 @@
 </script>
 
 <Layout>
+  <div slot="top" style="display: flex">
+    <img
+      src={logo}
+      style="height: 8vh; margin-right: 20px;"
+      alt="A/B Street logo"
+    />
+    <span bind:this={topDiv} />
+  </div>
   <div slot="left">
     <div bind:this={sidebarDiv} />
 
@@ -67,7 +82,7 @@
     {/if}
     <BasemapPicker />
   </div>
-  <div slot="main" style="position:relative; width: 100%; height: 100vh;">
+  <div slot="main" style="position: relative; width: 100%; height: 100%;">
     <MapLibre
       style={$mapStyle}
       standardControls

web/src/App.svelte

@@ -35,7 +35,7 @@
 </script>
 
 <SplitComponent>
-  <div slot="sidebar">
+  <div slot="top">
     <nav aria-label="breadcrumb">
       <!-- svelte-ignore a11y-invalid-attribute -->
       <ul>
@@ -47,7 +47,8 @@
         <li>Define neighbourhood boundaries</li>
       </ul>
     </nav>
-
+  </div>
+  <div slot="sidebar">
     <nav>
       <ul>
         <li>

web/src/NetworkMode.svelte

@@ -40,7 +40,7 @@
 <svelte:window on:keydown={onKeyDown} />
 
 <SplitComponent>
-  <div slot="sidebar">
+  <div slot="top">
     <nav aria-label="breadcrumb">
       <!-- svelte-ignore a11y-invalid-attribute -->
       <ul>
@@ -64,7 +64,8 @@
         <li>Routing</li>
       </ul>
     </nav>
-
+  </div>
+  <div slot="sidebar">
     <button on:click={back}>Back</button>
 
     <p>Drag markers for a route</p>

web/src/RouteMode.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
-  import { mapContents, sidebarContents } from "./stores";
+  import { topContents, mapContents, sidebarContents } from "./stores";
 
   // The kinda weird hack is that this must itself be nested underneath the
   // MapLibre bit, so it has context. The sidebar is the "remote" part.
   // TODO Maybe simplify accordingly
 </script>
 
+<div bind:this={$topContents}>
+  <slot name="top" />
+</div>
 <div bind:this={$sidebarContents}>
   <slot name="sidebar" />
 </div>

web/src/SplitComponent.svelte

@@ -82,7 +82,7 @@
 <svelte:window on:keydown={onKeyDown} />
 
 <SplitComponent>
-  <div slot="sidebar">
+  <div slot="top">
     <nav aria-label="breadcrumb">
       <!-- svelte-ignore a11y-invalid-attribute -->
       <ul>
@@ -102,7 +102,8 @@
         <li>Viewing shortcuts</li>
       </ul>
     </nav>
-
+  </div>
+  <div slot="sidebar">
     <button on:click={back}>Back to editing</button>
 
     {#if state.state == "neutral"}

web/src/ViewShortcutsMode.svelte

@@ -1,3 +1,6 @@
+<div class="top">
+  <slot name="top" />
+</div>
 <div class="left">
   <slot name="left" />
 </div>
@@ -10,13 +13,20 @@
     float: left;
   }
 
+  .top {
+    width: 100%;
+    height: 10vh;
+  }
+
   .left {
     width: 25%;
-    height: 100vh;
+    height: 90vh;
     overflow: auto;
     padding: 8px;
   }
+
   .main {
     width: 75%;
+    height: 90vh;
   }
 </style>

web/src/common/Layout.svelte

@@ -101,7 +101,7 @@
 <svelte:window on:keydown={onKeyDown} />
 
 <SplitComponent>
-  <div slot="sidebar">
+  <div slot="top">
     <nav aria-label="breadcrumb">
       <!-- svelte-ignore a11y-invalid-attribute -->
       <ul>
@@ -122,7 +122,8 @@
         </li>
       </ul>
     </nav>
-
+  </div>
+  <div slot="sidebar">
     <nav>
       <ul>
         <li>

web/src/edit/NeighbourhoodMode.svelte

@@ -43,6 +43,7 @@ export let mapStyle: Writable<string> = writable(
 export let example: Writable<string> = writable("");
 export let showAbout: Writable<boolean> = writable(true);
 
+export let topContents: Writable<HTMLDivElement | null> = writable(null);
 export let sidebarContents: Writable<HTMLDivElement | null> = writable(null);
 export let mapContents: Writable<HTMLDivElement | null> = writable(null);
 

web/src/stores.ts

@@ -46,10 +46,12 @@
 </script>
 
 <SplitComponent>
+  <div slot="top">
+    <h1>Choose your study area</h1>
+  </div>
   <div slot="sidebar">
     <About />
 
-    <h1>Choose your study area</h1>
     <button on:click={() => ($showAbout = true)}>About the LTN tool</button>
 
     {#if mapLoader}