2022-09-15 19:15:07 +02:00
|
|
|
<template>
|
2022-09-19 15:11:13 +02:00
|
|
|
<div class="w-full h-16 py-3 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow">
|
2022-09-15 19:15:07 +02:00
|
|
|
<div class="flex justify-evenly items-center gap-1 w-full max-w-lg dark:text-gray-300 text-gray-900">
|
|
|
|
|
<NuxtLink to="/" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path === '/' ? 'text-primary' : ''">
|
|
|
|
|
<Icon size="1.5em" 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 === '/news' ? 'text-primary' : ''">
|
|
|
|
|
<Icon size="1.5em" 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.5em" 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.5em" name="ion:settings-sharp" />
|
|
|
|
|
<span>Settings</span>
|
|
|
|
|
</NuxtLink>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
</script>
|
