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.
93 lines
2.5 KiB
93 lines
2.5 KiB
<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" />
|
|
</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" />
|
|
</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" />
|
|
</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" />
|
|
</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" />
|
|
</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>
|
|
|