make a back button at the top and the tabs at the bottom of each page

project.task.yaml

@@ -5,12 +5,9 @@ tasks:
 - 40 notifications :
   - push, where we trigger a ServiceWorker(?) in the app to reach out and check for new data assignee:matthew
 
-- .5 if there is no area search selected, make "anywhere" search the default
 - .5 allow to manage their notifications even without an identity
-- .1 put a "back" button at the top of the start page
 - .5 bug - on the discover page, enter a search term and search and see a duplicate project show at the end of the list
 - 01 Ensure each action sent to the server has a confirmation - eg registration (ie a toast something that dismisses after 5-10s)
-- 01 Make a new contact able to see me by default.
 
 - Home Feed & Quick Give screen :
   - 01 save the feed-viewed status in settings storage ("afterQuery")

src/views/HelpView.vue

@@ -1,5 +1,6 @@
 <template>
-  <QuickNav selected="Profile"></QuickNav>
+  <QuickNav />
+
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <!-- Breadcrumb -->

src/views/NewIdentifierView.vue

@@ -1,11 +1,25 @@
 <template>
-  <QuickNav selected="Profile"></QuickNav>
+  <QuickNav />
+
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Your Identity
-    </h1>
+    <!-- Breadcrumb -->
+    <div class="mb-8">
+      <!-- Back -->
+      <div class="text-lg text-center font-light relative px-7">
+        <h1
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          @click="$router.back()"
+        >
+          <fa icon="chevron-left" class="fa-fw"></fa>
+        </h1>
+      </div>
+
+      <!-- Heading -->
+      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+        Your Identity
+      </h1>
+    </div>
 
     <div class="flex justify-center py-12">
       <span />

src/views/SearchAreaView.vue

@@ -1,4 +1,6 @@
 <template>
+  <QuickNav />
+
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <!-- Breadcrumb -->
@@ -105,6 +107,7 @@ import {
 
 import { db } from "@/db/index";
 import { BoundingBox, MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import QuickNav from "@/components/QuickNav.vue";
 
 const DEFAULT_LAT_LONG_DIFF = 0.01;
 const WORLD_ZOOM = 2;
@@ -119,6 +122,7 @@ interface Notification {
 
 @Component({
   components: {
+    QuickNav,
     LRectangle,
     LMap,
     LMarker,

src/views/StartView.vue

@@ -3,10 +3,23 @@
     id="Content"
     class="p-6 pb-24 min-h-screen flex flex-col justify-center"
   >
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Start Here
-    </h1>
+    <!-- Breadcrumb -->
+    <div class="mb-8">
+      <!-- Back -->
+      <div class="text-lg text-center font-light relative px-7">
+        <h1
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          @click="$router.back()"
+        >
+          <fa icon="chevron-left" class="fa-fw"></fa>
+        </h1>
+      </div>
+
+      <!-- Heading -->
+      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+        Start Here
+      </h1>
+    </div>
 
     <!-- id used by puppeteer test script -->
     <div id="start-question" class="mt-8">

src/views/StatisticsView.vue

@@ -1,11 +1,25 @@
 <template>
-  <QuickNav selected="Profile"></QuickNav>
+  <QuickNav />
+
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Achievements & Statistics
-    </h1>
+    <!-- Breadcrumb -->
+    <div class="mb-8">
+      <!-- Back -->
+      <div class="text-lg text-center font-light relative px-7">
+        <h1
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          @click="$router.back()"
+        >
+          <fa icon="chevron-left" class="fa-fw"></fa>
+        </h1>
+      </div>
+
+      <!-- Heading -->
+      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+        Achievements & Statistics
+      </h1>
+    </div>
 
     <div>
       Here is a view of the activity you can see.
@@ -32,7 +46,7 @@
         {{ worldProperties.animationDurationSeconds }} seconds
       </div>
     </div>
-    <button class="float-right" @click="captureGraphics()">Screenshot</button>
+    <button class="float-right text-blue-600" @click="captureGraphics()">Screenshot</button>
     <div id="scene-container" class="h-screen"></div>
   </section>
 </template>

src/views/TestView.vue

@@ -1,11 +1,25 @@
 <template>
-  <QuickNav selected="Profile"></QuickNav>
+  <QuickNav />
+
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Test
-    </h1>
+    <!-- Breadcrumb -->
+    <div class="mb-8">
+      <!-- Back -->
+      <div class="text-lg text-center font-light relative px-7">
+        <h1
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          @click="$router.back()"
+        >
+          <fa icon="chevron-left" class="fa-fw"></fa>
+        </h1>
+      </div>
+
+      <!-- Heading -->
+      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+        Test
+      </h1>
+    </div>
 
     <div class="mb-8">
       <h2 class="text-xl font-bold mb-4">Notiwind Alert Test Suite</h2>