<template>
  <!-- QUICK NAV -->
  <nav
    id="QuickNav"
    class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50 pb-[env(safe-area-inset-bottom)]"
  >
    <ul class="flex text-2xl px-6 py-2 gap-1 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-2 px-1">
          <div class="flex flex-col items-center">
            <font-awesome icon="house-chimney" class="fa-fw" />
            <span class="text-xs mt-1">feed</span>
          </div>
        </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-2 px-1"
        >
          <div class="flex flex-col items-center">
            <font-awesome icon="magnifying-glass" class="fa-fw" />
            <span class="text-xs mt-1">search</span>
          </div>
        </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-2 px-1"
        >
          <div class="flex flex-col items-center">
            <font-awesome icon="hand" class="fa-fw" />
            <span class="text-xs mt-1">yours</span>
          </div>
        </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-2 px-1"
        >
          <div class="flex flex-col items-center">
            <font-awesome icon="users" class="fa-fw" />
            <span class="text-xs mt-1">contacts</span>
          </div>
        </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-2 px-1"
        >
          <div class="flex flex-col items-center">
            <font-awesome icon="circle-user" class="fa-fw" />
            <!--
             We used to say "account", so we'll keep that in the code,
             but it isn't accurate because we don't hold anything for them.
             We'll say "profile" to the users.
             (Or: settings, face, registry, cache, repo, vault... or separate 
             preferences from identity.)
            -->
            <span class="text-xs mt-1">profile</span>
          </div>
        </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>
