Xeovalyte
6fb439a754
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
49 lines
2.2 KiB
Vue
49 lines
2.2 KiB
Vue
<template>
|
|
<div v-if="route.meta.key !== 'disable'" class="w-full bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow" :class="platform === 'ios' ? 'navbar' : 'py-3'">
|
|
<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>Nieuws</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>Agenda</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="userStore.userPersons[0] && userStore.userPersons.filter(a => a.wedstrijdteam).length > 0" 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:podium-outline" />
|
|
<span>Wedstrijd</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Device } from '@capacitor/device';
|
|
|
|
const route = useRoute()
|
|
const userStore = useUserStore()
|
|
|
|
const platform = ref(null)
|
|
|
|
onMounted(() => {
|
|
Device.getInfo().then(info => {
|
|
platform.value = info.platform
|
|
});
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.navbar {
|
|
padding-bottom: calc(env(safe-area-inset-bottom) - 10px);
|
|
padding-top: 12px;
|
|
}
|
|
</style>
|