quicknav-component #34
Merged
anomalist
merged 2 commits from quicknav-component
into master
1 year ago
12 changed files with 135 additions and 520 deletions
@ -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> |
Loading…
Reference in new issue