You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.5 KiB
118 lines
3.5 KiB
<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>
|
|
|