This is the QuickNav component

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>