From 4758a740de71fc866893cedb1d7113ff54f62ea2 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Tue, 4 Jul 2023 20:03:36 +0800
Subject: [PATCH 1/5] First draft of Vue3 version.  WIll finish after
 error-logging merge

---
 src/components/GiftedDialog.vue | 98 ++++++++++++++++++---------------
 1 file changed, 54 insertions(+), 44 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index c158cc36..d6c630c1 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -40,50 +40,60 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: ["message"],
-  data() {
-    return {
-      giver: null,
-      description: "",
-      hours: "0",
-      visible: false,
-    };
-  },
-  methods: {
-    open(giver) {
-      // giver: GiverInputInfo
-      this.giver = giver;
-      this.visible = true;
-    },
-    close() {
-      this.visible = false;
-    },
-    increment() {
-      this.hours = `${(parseFloat(this.hours) || 0) + 1}`;
-    },
-    decrement() {
-      this.hours = `${Math.max(0, (parseFloat(this.hours) || 1) - 1)}`;
-    },
-    confirm() {
-      this.close();
-      this.$emit("dialog-result", {
-        action: "confirm",
-        giver: this.giver,
-        hours: parseFloat(this.hours),
-        description: this.description,
-      });
-      this.description = "";
-      this.giver = null;
-      this.hours = "0";
-    },
-    cancel() {
-      this.close();
-      this.$emit("dialog-result", { action: "cancel" });
-    },
-  },
-};
+<script lang="ts">
+import {Vue, Component, Prop, Emit} from "vue-facing-decorator";
+
+@Component
+export default class GiftedDialog extends Vue {
+  @Prop message = "";
+
+  giver = null;
+  description = "";
+  hours = "0";
+  visible = false;
+
+  open(giver) {
+    // giver: GiverInputInfo
+    this.giver = giver;
+    this.visible = true;
+  }
+  
+  close() {
+    this.visible = false;
+  }
+
+  increment() {
+    this.hours = `${(parseFloat(this.hours) || 0) + 1}`;
+  }
+
+  decrement() {
+    this.hours = `${Math.max(0, (parseFloat(this.hours) || 1) - 1)}`;
+  }
+
+  @Emit("dialog-result")
+  confirm() {
+    result = {
+      action: "confirm",
+      giver: this.giver,
+      hours: parseFloat(this.hours),
+      description: this.description,
+    };    
+    this.close();
+    this.description = "";
+    this.giver = null;
+    this.hours = "0";
+
+    return result;
+  }
+
+  @Emit("dialog-result")
+  cancel() {
+    result = { action: "cancel" };
+    this.close();
+    return result;
+  }
+
+}
 </script>
 
 <style>

From 80a1185faaeebe45ecd6be518c76445786788a9d Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Wed, 5 Jul 2023 15:59:58 +0800
Subject: [PATCH 2/5] Fix for missing scene-container

---
 src/views/StatisticsView.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/views/StatisticsView.vue b/src/views/StatisticsView.vue
index 36684b80..1b01fa90 100644
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -80,6 +80,7 @@
       </div>
     </div>
     <button class="float-right" @click="captureGraphics()">Screenshot</button>
+    <div id="scene-container" class="h-screen"></div>
     <AlertMessage
       :alertTitle="alertTitle"
       :alertMessage="alertMessage"
@@ -98,17 +99,22 @@ interface WorldProperties {
   endTime?: string;
 }
 
-@Component({ components: { AlertMessage } })
+@Component({ components: { AlertMessage, World } })
 export default class StatisticsView extends Vue {
   world: World;
   worldProperties: WorldProperties = {};
 
   // 'mounted' hook runs after initial render
   mounted() {
-    const container = document.querySelector("#scene-container");
-    const newWorld = new World(container, this);
-    newWorld.start();
-    this.world = newWorld;
+    try {
+      const container = document.querySelector("#scene-container");
+      console.log(container);
+      const newWorld = new World(container, this);
+      newWorld.start();
+      this.world = newWorld;
+    } catch (err) {
+      console.log(err);
+    }
   }
 
   public captureGraphics() {

From cf540963262de920ded4d8cc746b4c9704dee4f3 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Wed, 5 Jul 2023 16:27:21 +0800
Subject: [PATCH 3/5] Looks like GiftedDialog works? A little cleanup.

---
 src/components/GiftedDialog.vue | 11 +++---
 src/libs/endorserServer.ts      |  2 +-
 src/views/StatisticsView.vue    | 66 ++-------------------------------
 3 files changed, 10 insertions(+), 69 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index d6c630c1..018c1c5f 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts">
-import {Vue, Component, Prop, Emit} from "vue-facing-decorator";
+import { Vue, Component, Prop, Emit } from "vue-facing-decorator";
 
 @Component
 export default class GiftedDialog extends Vue {
@@ -57,7 +57,7 @@ export default class GiftedDialog extends Vue {
     this.giver = giver;
     this.visible = true;
   }
-  
+
   close() {
     this.visible = false;
   }
@@ -72,12 +72,12 @@ export default class GiftedDialog extends Vue {
 
   @Emit("dialog-result")
   confirm() {
-    result = {
+    const result = {
       action: "confirm",
       giver: this.giver,
       hours: parseFloat(this.hours),
       description: this.description,
-    };    
+    };
     this.close();
     this.description = "";
     this.giver = null;
@@ -88,11 +88,10 @@ export default class GiftedDialog extends Vue {
 
   @Emit("dialog-result")
   cancel() {
-    result = { action: "cancel" };
+    const result = { action: "cancel" };
     this.close();
     return result;
   }
-
 }
 </script>
 
diff --git a/src/libs/endorserServer.ts b/src/libs/endorserServer.ts
index 026e7057..3000409a 100644
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@@ -90,7 +90,7 @@ export function didInfo(did, identifiers, contacts) {
     if (contact) {
       return contact.name || "Someone Unnamed in Contacts";
     } else if (!did) {
-      return "Unpecified Person";
+      return "Unspecified Person";
     } else if (isHiddenDid(did)) {
       return "Someone Not In Network";
     } else {
diff --git a/src/views/StatisticsView.vue b/src/views/StatisticsView.vue
index 1b01fa90..b931f4f2 100644
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -103,6 +103,8 @@ interface WorldProperties {
 export default class StatisticsView extends Vue {
   world: World;
   worldProperties: WorldProperties = {};
+  alertTitle = "";
+  alertMessage = "";
 
   // 'mounted' hook runs after initial render
   mounted() {
@@ -114,68 +116,12 @@ export default class StatisticsView extends Vue {
       this.world = newWorld;
     } catch (err) {
       console.log(err);
+      this.alertTitle = "Mounting error";
+      this.alertMessage = err.message;
     }
   }
 
   public captureGraphics() {
-    /**
-    // from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#examples
-    // Adds a blank image
-    const dataBlob = document
-      .querySelector("#scene-container")
-      .firstChild.toBlob((blob) => {
-        const newImg = document.createElement("img");
-        const url = URL.createObjectURL(blob);
-
-        newImg.onload = () => {
-          // no longer need to read the blob so it's revoked
-          URL.revokeObjectURL(url);
-        };
-
-        newImg.src = url;
-        document.body.appendChild(newImg);
-      });
-     **/
-
-    /**
-    // Yields a blank page with the iframe below
-    const dataUrl = document
-      .querySelector("#scene-container")
-      .firstChild.toDataURL("image/png");
-     **/
-
-    /**
-    // Yields a blank page with the iframe below
-    const dataUrl = this.world.renderer.domElement.toDataURL("image/png");
-     **/
-
-    /**
-    // Show the image in a new tab
-    const iframe = `
-      <iframe
-        src="${dataUrl}"
-        frameborder="0"
-        style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;"
-        allowfullscreen>
-      </iframe>`;
-    const win = window.open();
-    win.document.open();
-    win.document.write(iframe);
-    win.document.close();
-     **/
-
-    // from https://stackoverflow.com/a/17407392/845494
-    // This yields a file with funny formatting.
-    //const image = const dataUrl.replace("image/png", "image/octet-stream");
-
-    /**
-    // Yields a blank image at the bottom of the page
-    // from https://discourse.threejs.org/t/save-screenshot-on-server/39900/3
-    const img = new Image();
-    img.src = this.world.renderer.domElement.toDataURL();
-    document.body.appendChild(img);
-     **/
-
     /**
      * This yields an SVG that only shows white and black highlights
      // from https://stackoverflow.com/questions/27632621/exporting-from-three-js-scene-to-svg-or-other-vector-format
@@ -183,16 +129,12 @@ export default class StatisticsView extends Vue {
     const rendererSVG = new SVGRenderer();
     rendererSVG.setSize(window.innerWidth, window.innerHeight);
     rendererSVG.render(this.world.scene, this.world.camera);
-    //document.body.appendChild(rendererSVG.domElement);
     ExportToSVG(rendererSVG, "test.svg");
   }
 
   public setWorldProperty(propertyName, propertyValue) {
     this.worldProperties[propertyName] = propertyValue;
   }
-
-  alertTitle = "";
-  alertMessage = "";
 }
 
 function ExportToSVG(rendererSVG, filename) {

From dda3ad057d500c8644056b948c2961db4d808ed9 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Wed, 5 Jul 2023 17:58:18 +0800
Subject: [PATCH 4/5] This is the QuickNav component

---
 src/components/QuickNav.vue | 93 +++++++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 src/components/QuickNav.vue

diff --git a/src/components/QuickNav.vue b/src/components/QuickNav.vue
new file mode 100644
index 00000000..3ba98bb8
--- /dev/null
+++ b/src/components/QuickNav.vue
@@ -0,0 +1,93 @@
+<template>
+  <!-- QUICK NAV -->
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
+    <ul class="flex text-2xl p-2 gap-2">
+      <!-- Home Feed -->
+      <li
+        :class="{
+          'basis-1/5': true,
+          'rounded-md': true,
+          'bg-slate-400 text-white': selected === 'Home',
+          'text-slate-500': selected !== 'Home',
+        }"
+      >
+        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
+          <fa icon="house-chimney" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Search -->
+      <li
+        :class="{
+          'basis-1/5': true,
+          'rounded-md': true,
+          'bg-slate-400 text-white': selected === 'Discover',
+          'text-slate-500': selected !== 'Discover',
+        }"
+      >
+        <router-link
+          :to="{ name: 'discover' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="magnifying-glass" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Projects -->
+      <li
+        :class="{
+          'basis-1/5': true,
+          'rounded-md': true,
+          'bg-slate-400 text-white': selected === 'Projects',
+          'text-slate-500': selected !== 'Projects',
+        }"
+      >
+        <router-link
+          :to="{ name: 'projects' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="folder-open" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Contacts -->
+      <li
+        :class="{
+          'basis-1/5': true,
+          'rounded-md': true,
+          'bg-slate-400 text-white': selected === 'Contacts',
+          'text-slate-500': selected !== 'Contacts',
+        }"
+      >
+        <router-link
+          :to="{ name: 'contacts' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="users" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Profile -->
+      <li
+        :class="{
+          'basis-1/5': true,
+          'rounded-md': true,
+          'bg-slate-400 text-white': selected === 'Profile',
+          'text-slate-500': selected !== 'Profile',
+        }"
+      >
+        <router-link
+          :to="{ name: 'account' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="circle-user" class="fa-fw"></fa>
+        </router-link>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-facing-decorator";
+
+@Component
+export default class QuickNav extends Vue {
+  @Prop selected = "";
+}
+</script>

From 5be67fd4c9baa5a1073c1479318584bc80f3bbe8 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Wed, 5 Jul 2023 17:59:31 +0800
Subject: [PATCH 5/5] Rolled out to all views that had HTML quicknav

---
 src/views/AccountViewView.vue       | 52 ++----------------------
 src/views/ContactQRScanShowView.vue | 52 ++----------------------
 src/views/ContactsView.vue          | 49 ++---------------------
 src/views/DiscoverView.vue          | 48 ++--------------------
 src/views/HelpView.vue              | 52 ++----------------------
 src/views/HomeView.vue              | 48 ++--------------------
 src/views/NewIdentifierView.vue     | 52 ++----------------------
 src/views/ProjectViewView.vue       | 48 ++--------------------
 src/views/ProjectsView.vue          | 47 ++--------------------
 src/views/SeedBackupView.vue        | 52 ++----------------------
 src/views/StatisticsView.vue        | 62 +++++------------------------
 11 files changed, 42 insertions(+), 520 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index ed2c7df0..c11d4101 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -1,52 +1,5 @@
 <template>
-  <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
-    <ul class="flex text-2xl p-2 gap-2">
-      <!-- Home Feed -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
-          <fa icon="house-chimney" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Search -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'discover' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="magnifying-glass" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Projects -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'projects' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="folder-open" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Contacts -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="users" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Profile -->
-      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
-        <router-link
-          :to="{ name: 'account' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="circle-user" class="fa-fw"></fa>
-        </router-link>
-      </li>
-    </ul>
-  </nav>
-
+  <QuickNav selected="Profile"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
@@ -326,6 +279,7 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { AxiosError } from "axios/index";
 import AlertMessage from "@/components/AlertMessage";
+import QuickNav from "@/components/QuickNav";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@@ -339,7 +293,7 @@ interface RateLimits {
   nextWeekBeginDateTime: string;
 }
 
-@Component({ components: { AlertMessage } })
+@Component({ components: { AlertMessage, QuickNav } })
 export default class AccountViewView extends Vue {
   Constants = AppString;
 
diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index 871dd254..f41ba9cf 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -1,52 +1,5 @@
 <template>
-  <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
-    <ul class="flex text-2xl p-2 gap-2">
-      <!-- Home Feed -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
-          <fa icon="house-chimney" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Search -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'discover' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="magnifying-glass" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Projects -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'projects' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="folder-open" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Contacts -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="users" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Profile -->
-      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
-        <router-link
-          :to="{ name: 'account' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="circle-user" class="fa-fw"></fa>
-        </router-link>
-      </li>
-    </ul>
-  </nav>
-
+  <QuickNav selected="Profile"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
@@ -80,6 +33,7 @@ import * as R from "ramda";
 import { SimpleSigner } from "@/libs/crypto";
 import * as didJwt from "did-jwt";
 import AlertMessage from "@/components/AlertMessage";
+import QuickNav from "@/components/QuickNav";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@@ -88,6 +42,7 @@ const Buffer = require("buffer/").Buffer;
   components: {
     QRCodeVue3,
     AlertMessage,
+    QuickNav,
   },
 })
 export default class ContactQRScanShow extends Vue {
@@ -95,7 +50,6 @@ export default class ContactQRScanShow extends Vue {
   apiServer = "";
   qrValue = "";
 
-  // 'created' hook runs when the Vue instance is first created
   async created() {
     await db.open();
     const settings = await db.settings.get(MASTER_SETTINGS_KEY);
diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index 0425b802..686e3a75 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -1,48 +1,5 @@
 <template>
-  <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
-    <ul class="flex text-2xl p-2 gap-2">
-      <!-- Home Feed -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1"
-          ><fa icon="house-chimney" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Search -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'discover' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="magnifying-glass" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Contacts -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'projects' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="folder-open" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Contacts -->
-      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="users" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Profile -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'account' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="circle-user" class="fa-fw"></fa
-        ></router-link>
-      </li>
-    </ul>
-  </nav>
-
+  <QuickNav selected="Contacts"></QuickNav>
   <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
@@ -254,12 +211,14 @@ import {
   RegisterVerifiableCredential,
   SERVICE_ID,
 } from "@/libs/endorserServer";
+import AlertMessage from "@/components/AlertMessage";
+import QuickNav from "@/components/QuickNav";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 
 @Component({
-  components: { AlertMessage },
+  components: { AlertMessage, QuickNav },
 })
 export default class ContactsView extends Vue {
   activeDid = "";
diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue
index 06def7cd..dba66d18 100644
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -1,47 +1,5 @@
 <template>
-  <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
-    <ul class="flex text-2xl p-2 gap-2">
-      <!-- Home Feed -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1"
-          ><fa icon="house-chimney" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Search -->
-      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
-        <router-link
-          :to="{ name: 'discover' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="magnifying-glass" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Projects -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'projects' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="folder-open" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Contacts -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="users" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Profile -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'account' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="circle-user" class="fa-fw"></fa
-        ></router-link>
-      </li>
-    </ul>
-  </nav>
+  <QuickNav selected="Discover"></QuickNav>
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
@@ -168,16 +126,16 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import * as R from "ramda";
 import { accessToken } from "@/libs/crypto";
 import AlertMessage from "@/components/AlertMessage";
+import QuickNav from "@/components/QuickNav";
 
 @Component({
-  components: { AlertMessage },
+  components: { AlertMessage, QuickNav },
 })
 export default class DiscoverView extends Vue {
   activeDid = "";
   apiServer = "";
   searchTerms = "";
 
-  // 'mounted' hook runs after initial render
   async mounted() {
     await db.open();
     const settings = await db.settings.get(MASTER_SETTINGS_KEY);
diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue
index 71e01449..9b1888de 100644
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -1,52 +1,5 @@
 <template>
-  <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
-    <ul class="flex text-2xl p-2 gap-2">
-      <!-- Home Feed -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
-          <fa icon="house-chimney" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Search -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'discover' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="magnifying-glass" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Projects -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'projects' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="folder-open" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Contacts -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="users" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Profile -->
-      <li class="basis-1/5 rounded-md text-slate-400">
-        <router-link
-          :to="{ name: 'account' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="circle-user" class="fa-fw"></fa>
-        </router-link>
-      </li>
-    </ul>
-  </nav>
-
+  <QuickNav selected="Profile"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
@@ -228,8 +181,9 @@
 <script lang="ts">
 import * as Package from "../../package.json";
 import { Component, Vue } from "vue-facing-decorator";
+import QuickNav from "@/components/QuickNav";
 
-@Component
+@Component({ components: { QuickNav } })
 export default class Help extends Vue {
   package = Package;
 }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 4f3ba8e2..44230c37 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,48 +1,5 @@
 <template>
-  <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
-    <ul class="flex text-2xl p-2 gap-2">
-      <!-- Home Feed -->
-      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
-        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1"
-          ><fa icon="house-chimney" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Search -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'discover' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="magnifying-glass" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Projects -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'projects' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="folder-open" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Contacts -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="users" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Profile -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'account' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="circle-user" class="fa-fw"></fa
-        ></router-link>
-      </li>
-    </ul>
-  </nav>
-
+  <QuickNav selected="Home"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
@@ -124,9 +81,10 @@ import { createAndSubmitGive, didInfo } from "@/libs/endorserServer";
 import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
 import AlertMessage from "@/components/AlertMessage";
+import QuickNav from "@/components/QuickNav";
 
 @Options({
-  components: { GiftedDialog, AlertMessage },
+  components: { GiftedDialog, AlertMessage, QuickNav },
 })
 export default class HomeView extends Vue {
   activeDid = "";
diff --git a/src/views/NewIdentifierView.vue b/src/views/NewIdentifierView.vue
index 1b363b6a..8e840bfc 100644
--- a/src/views/NewIdentifierView.vue
+++ b/src/views/NewIdentifierView.vue
@@ -1,52 +1,5 @@
 <template>
-  <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
-    <ul class="flex text-2xl p-2 gap-2">
-      <!-- Home Feed -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
-          <fa icon="house-chimney" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Search -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'discover' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="magnifying-glass" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Projects -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'projects' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="folder-open" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Contacts -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="users" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Profile -->
-      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
-        <router-link
-          :to="{ name: 'account' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="circle-user" class="fa-fw"></fa>
-        </router-link>
-      </li>
-    </ul>
-  </nav>
-
+  <QuickNav selected="Profile"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
@@ -90,8 +43,9 @@ import { Component, Vue } from "vue-facing-decorator";
 import { accountsDB, db } from "@/db";
 import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import QuickNav from "@/components/QuickNav";
 
-@Component
+@Component({ components: { QuickNav } })
 export default class AccountViewView extends Vue {
   loading = true;
 
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index 89c54fc7..963cb967 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -1,48 +1,5 @@
 <template>
-  <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
-    <ul class="flex text-2xl p-2 gap-2">
-      <!-- Home Feed -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1"
-          ><fa icon="house-chimney" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Search -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'discover' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="magnifying-glass" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Projects -->
-      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
-        <router-link
-          :to="{ name: 'projects' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="folder-open" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Contacts -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="hand" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Profile -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'account' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="circle-user" class="fa-fw"></fa
-        ></router-link>
-      </li>
-    </ul>
-  </nav>
-
+  <QuickNav selected="Projects"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <!-- Breadcrumb -->
@@ -200,9 +157,10 @@ import { createAndSubmitGive } from "@/libs/endorserServer";
 import { accessToken } from "@/libs/crypto";
 import { IIdentifier } from "@veramo/core";
 import AlertMessage from "@/components/AlertMessage";
+import QuickNav from "@/components/QuickNav";
 
 @Component({
-  components: { GiftedDialog, AlertMessage },
+  components: { GiftedDialog, AlertMessage, QuickNav },
 })
 export default class ProjectViewView extends Vue {
   activeDid = "";
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index 99596414..01bde830 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -1,47 +1,5 @@
 <template>
-  <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
-    <ul class="flex text-2xl p-2 gap-2">
-      <!-- Home Feed -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1"
-          ><fa icon="house-chimney" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Search -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'discover' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="magnifying-glass" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Projects -->
-      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
-        <router-link
-          :to="{ name: 'projects' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="folder-open" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Contacts -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="users" class="fa-fw"></fa
-        ></router-link>
-      </li>
-      <!-- Profile -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'account' }"
-          class="block text-center py-3 px-1"
-          ><fa icon="circle-user" class="fa-fw"></fa
-        ></router-link>
-      </li>
-    </ul>
-  </nav>
+  <QuickNav selected="Projects"></QuickNav>
   <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
@@ -123,6 +81,7 @@ import { accessToken } from "@/libs/crypto";
 import { IIdentifier } from "@veramo/core";
 import InfiniteScroll from "@/components/InfiniteScroll";
 import AlertMessage from "@/components/AlertMessage";
+import QuickNav from "@/components/QuickNav";
 
 /**
  * Represents data about a project
@@ -147,7 +106,7 @@ interface ProjectData {
 }
 
 @Component({
-  components: { InfiniteScroll, AlertMessage },
+  components: { InfiniteScroll, AlertMessage, QuickNav },
 })
 export default class ProjectsView extends Vue {
   apiServer = "";
diff --git a/src/views/SeedBackupView.vue b/src/views/SeedBackupView.vue
index f896b042..08129049 100644
--- a/src/views/SeedBackupView.vue
+++ b/src/views/SeedBackupView.vue
@@ -1,52 +1,5 @@
 <template>
-  <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
-    <ul class="flex text-2xl p-2 gap-2">
-      <!-- Home Feed -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
-          <fa icon="house-chimney" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Search -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'discover' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="magnifying-glass" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Projects -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'projects' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="folder-open" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Contacts -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="users" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Profile -->
-      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
-        <router-link
-          :to="{ name: 'account' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="circle-user" class="fa-fw"></fa>
-        </router-link>
-      </li>
-    </ul>
-  </nav>
-
+  <QuickNav selected="Profile"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
@@ -98,8 +51,9 @@ import { accountsDB, db } from "@/db";
 import * as R from "ramda";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import AlertMessage from "@/components/AlertMessage";
+import QuickNav from "@/components/QuickNav";
 
-@Component({ components: { AlertMessage } })
+@Component({ components: { AlertMessage, QuickNav } })
 export default class SeedBackupView extends Vue {
   activeAccount = null;
   showSeed = false;
diff --git a/src/views/StatisticsView.vue b/src/views/StatisticsView.vue
index b931f4f2..c06256ef 100644
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -1,52 +1,5 @@
 <template>
-  <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
-    <ul class="flex text-2xl p-2 gap-2">
-      <!-- Home Feed -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
-          <fa icon="house-chimney" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Search -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'discover' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="magnifying-glass" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Projects -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'projects' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="folder-open" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Contacts -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="users" class="fa-fw"></fa>
-        </router-link>
-      </li>
-      <!-- Profile -->
-      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
-        <router-link
-          :to="{ name: 'account' }"
-          class="block text-center py-3 px-1"
-        >
-          <fa icon="circle-user" class="fa-fw"></fa>
-        </router-link>
-      </li>
-    </ul>
-  </nav>
-
+  <QuickNav selected="Profile"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
@@ -86,27 +39,34 @@
       :alertMessage="alertMessage"
     ></AlertMessage>   
   </section>
-</template>
+</template>    /**
+    // from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#examples
+// Adds a blank image const dataBlob = document
+.querySelector("#scene-container") .firstChild.toBlob((blob) => { const newImg =
+document.createElement("img"); const url = URL.createObjectURL(blob);
+newImg.onload = () => { // no longer need to read the blob so it's revoked
+URL.revokeObjectURL(url); }; newImg.src = url;
+document.body.appendChild(newImg); }); **/
 
 <script lang="ts">
 import { SVGRenderer } from "three/addons/renderers/SVGRenderer.js";
 import { Component, Vue } from "vue-facing-decorator";
 import { World } from "@/components/World/World.js";
 import AlertMessage from "@/components/AlertMessage";
+import QuickNav from "@/components/QuickNav";
 
 interface WorldProperties {
   startTime?: string;
   endTime?: string;
 }
 
-@Component({ components: { AlertMessage, World } })
+@Component({ components: { AlertMessage, World, QuickNav } })
 export default class StatisticsView extends Vue {
   world: World;
   worldProperties: WorldProperties = {};
   alertTitle = "";
   alertMessage = "";
 
-  // 'mounted' hook runs after initial render
   mounted() {
     try {
       const container = document.querySelector("#scene-container");