crowd-funder-for-time-pwa/src/components/QuickNav.vue

<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 max-w-3xl mx-auto">
      <!-- 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="hand" 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>