More consistency with the top bar. #15

Author: dabreegster

web/src/DebugGJ.svelte

@@ -13,9 +13,21 @@
 </script>
 
 <SplitComponent>
-  <div slot="sidebar">
-    <h1>Debug GJ</h1>
+  <div slot="top">
+    <nav aria-label="breadcrumb">
+      <!-- svelte-ignore a11y-invalid-attribute -->
+      <ul>
+        <li>
+          <a href="#" on:click={() => ($mode = { mode: "title" })}
+            >Choose study area</a
+          >
+        </li>
+        <li>Debug route snapper</li>
+      </ul>
+    </nav>
+  </div>
 
+  <div slot="sidebar">
     <button on:click={() => ($mode = { mode: "network" })}>Back</button>
   </div>
 

web/src/DebugMode.svelte

@@ -7,9 +7,29 @@
 </script>
 
 <SplitComponent>
-  <div slot="sidebar">
-    <h1>Debug mode</h1>
+  <div slot="top">
+    <nav aria-label="breadcrumb">
+      <!-- svelte-ignore a11y-invalid-attribute -->
+      <ul>
+        <li>
+          <a href="#" on:click={() => ($mode = { mode: "title" })}
+            >Choose study area</a
+          >
+        </li>
+        <li>
+          <a href="#" on:click={() => ($mode = { mode: "network" })}
+            >Pick neighbourhood</a
+          >
+        </li>
+        <li>
+          <a href="#" on:click={() => ($mode = { mode: "neighbourhood" })}>Editing modal filters</a>
+        </li>
+        <li>Debug mode</li>
+      </ul>
+    </nav>
+  </div>
 
+  <div slot="sidebar">
     <button on:click={() => ($mode = { mode: "neighbourhood" })}
       >Back to editing</button
     >

web/src/NetworkMode.svelte

@@ -41,10 +41,10 @@
       <ul>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "title" })}
-            >Change study area</a
+            >Choose study area</a
           >
         </li>
-        <li>Define neighbourhood boundaries</li>
+        <li>Pick neighbourhood</li>
       </ul>
     </nav>
     <span style="display: flex">

web/src/RouteMode.svelte

@@ -46,12 +46,12 @@
       <ul>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "title" })}
-            >Change study area</a
+            >Choose study area</a
           >
         </li>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "network" })}
-            >Change neighbourhood</a
+            >Pick neighbourhood</a
           >
         </li>
         {#if prevMode == "neighbourhood"}

web/src/SetBoundaryMode.svelte

@@ -15,10 +15,18 @@
     $route_tool!.startArea();
   }
 
+  // TODO When we click a link and nav away, clear state
+
   function onFailure() {
-    $mode = {
-      mode: "network",
-    };
+    if (existing) {
+      $mode = {
+        mode: "neighbourhood",
+      };
+    } else {
+      $mode = {
+        mode: "network",
+      };
+    }
     $route_tool!.clearEventListeners();
   }
 
@@ -41,6 +49,34 @@
 </script>
 
 <SplitComponent>
+  <div slot="top">
+    <nav aria-label="breadcrumb">
+      <!-- svelte-ignore a11y-invalid-attribute -->
+      <ul>
+        <li>
+          <a href="#" on:click={() => ($mode = { mode: "title" })}
+            >Choose study area</a
+          >
+        </li>
+        <li>
+          <a href="#" on:click={() => ($mode = { mode: "network" })}
+            >Pick neighbourhood</a
+          >
+        </li>
+        {#if existing}
+          <li>
+            <a href="#" on:click={() => ($mode = { mode: "neighbourhood" })}
+              >Editing modal filters</a
+            >
+          </li>
+          <li>Changing neighbourhood boundary</li>
+        {:else}
+          <li>Creating new neighbourhood boundary</li>
+        {/if}
+      </ul>
+    </nav>
+  </div>
+
   <div slot="sidebar">
     <h1>Draw your neighbourhood boundary for {name}</h1>
 

web/src/ViewShortcutsMode.svelte

@@ -88,12 +88,12 @@
       <ul>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "title" })}
-            >Change study area</a
+            >Choose study area</a
           >
         </li>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "network" })}
-            >Change neighbourhood</a
+            >Pick neighbourhood</a
           >
         </li>
         <li>

web/src/edit/NeighbourhoodMode.svelte

@@ -107,12 +107,12 @@
       <ul>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "title" })}
-            >Change study area</a
+            >Choose study area</a
           >
         </li>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "network" })}
-            >Change neighbourhood</a
+            >Pick neighbourhood</a
           >
         </li>
         <li>

web/src/title/TitleMode.svelte

@@ -47,7 +47,10 @@
 
 <SplitComponent>
   <div slot="top">
-    <h1>Choose your study area</h1>
+    <nav aria-label="breadcrumb">
+      <ul>
+        <li>Choose study area</li>
+  </ul></nav>
   </div>
   <div slot="sidebar">
     <About />