personal-site/components/Navbar.vue

40 lines
1.9 KiB
Vue
Raw Normal View History

2024-12-22 12:22:47 -08:00
<script setup>
2025-01-01 00:26:10 -08:00
import Card from './Card.vue';
2025-02-16 19:31:39 -08:00
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
const switchLocalePath = useSwitchLocalePath()
2025-01-01 00:26:10 -08:00
2025-02-16 19:31:39 -08:00
const { locale, setLocale } = useI18n();
const localePath = useLocalePath();
const userLocales = ref([
{ code: 'en', name: 'English' },
{ code: 'tp', name: 'toki pona' }
]);
watch(locale, (newLocale) => {
switchLocalePath(newLocale);
}, {immediate: true});
2024-12-22 12:22:47 -08:00
</script>
2024-12-21 19:11:09 -08:00
<template>
<div class="flex justify-center">
2025-01-01 00:26:10 -08:00
<div class="flex-col transition-[margin] justify-center md:rounded-md max-md:w-screen lg:mt-3 w-fit-content">
<Card>
2025-02-16 19:31:39 -08:00
<div class="flex justify-center items-center gap-4">
<NuxtLink :to="localePath('/')" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">{{ $t('home') }}</NuxtLink>
<NuxtLink :to="localePath('/article/')" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">{{$t('articles')}}</NuxtLink>
<NuxtLink :to="localePath('/article/' + locale + '/collections/awesome')" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">{{$t('awesome')}}</NuxtLink>
<NuxtLink :to="localePath('/article/' + locale + '/collections/badges')" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">{{$t('badges')}}</NuxtLink>
<select v-model="locale" @change="setLocale(locale)" class="bg-transparent text-purple-100 border border-purple-400 rounded-md p-1">
<option v-for="loc in userLocales" :key="loc.code" :value="loc.code">
{{ loc.name }}
</option>
</select>
2025-01-01 00:26:10 -08:00
</div>
</Card>
2024-12-21 19:11:09 -08:00
</div>
</div>
2025-02-16 19:31:39 -08:00
</template>