wrbapp/frontend/components/layout/Navbar.vue
xeovalyte 7a5f20fa0d
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
updating
2022-11-29 18:14:11 +01:00

33 lines
1.9 KiB
Vue

<template>
<div v-if="route.meta.key !== 'disable'" class="w-full h-16 py-3 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow">
<div class="flex text-sm justify-evenly items-center gap-1 w-full max-w-lg dark:text-gray-300 text-gray-900 overflow-x-hidden">
<NuxtLink to="/" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path === '/' ? 'text-primary' : ''">
<Icon size="1.8em" name="ion:home-outline" />
<span>Home</span>
</NuxtLink>
<NuxtLink to="/news" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path.startsWith('/news') ? 'text-primary' : ''">
<Icon size="1.8em" name="ion:newspaper-outline" />
<span>News</span>
</NuxtLink>
<NuxtLink to="/calendar" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path === '/calendar' ? 'text-primary' : ''">
<Icon size="1.8em" name="ion:calendar-outline" />
<span>Calendar</span>
</NuxtLink>
<NuxtLink to="/settings" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path.startsWith('/settings') ? 'text-primary' : ''">
<Icon size="1.8em" name="ion:settings-sharp" />
<span>Settings</span>
</NuxtLink>
<NuxtLink v-if="userData.wedstrijdteam" to="/wedstrijd" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path.startsWith('/wedstrijd') ? 'text-primary' : ''">
<Icon size="1.8em" name="ion:settings-sharp" />
<span>Wedstrijd</span>
</NuxtLink>
</div>
</div>
</template>
<script setup>
const route = useRoute()
const { userData } = inject('firebase')
</script>