Techit Thawiang
78 lines
2.9 KiB
Vue
Executable File
78 lines
2.9 KiB
Vue
Executable File
<template>
|
|
<header>
|
|
<div class="site-title">
|
|
<div class="container flex justify-between">
|
|
<div class="row w-fit items-center">
|
|
<div class="row flex">
|
|
<img width="48" height="48" src="/favicon.ico" alt="*nix" class="text-2xl mr-4"></img>
|
|
<img width="124" height="20" src="/wordmark.svg" alt="in Thailand" class="text-2xl my-[13px]"></img>
|
|
</div>
|
|
</div>
|
|
<div class="hidden sm:flex w-fit items-center justify-end">
|
|
<div class="row">
|
|
<UFieldGroup>
|
|
<UButton size="sm" :label="t('sites.join-discord')" to="https://discord.gg/p5wuX5GwB7" icon="i-lucide-users" />
|
|
<UDropdownMenu
|
|
size="sm"
|
|
:items="siteTitleItems"
|
|
:content="{
|
|
align: 'end',
|
|
side: 'bottom',
|
|
sideOffset: 8
|
|
}"
|
|
:ui="{
|
|
content: 'w-36'
|
|
}"
|
|
>
|
|
<UButton size="sm" :label="t('sites.all')" icon="i-lucide-map" color="neutral" variant="outline" />
|
|
</UDropdownMenu>
|
|
</UFieldGroup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav class="site-navbar">
|
|
<div class="container">
|
|
<div class="hidden sm:flex">
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-link">
|
|
<NuxtLinkLocale href="/">{{ t('nav.home') }}</NuxtLinkLocale>
|
|
</li>
|
|
<li class="nav-link">
|
|
<NuxtLinkLocale href="/about">{{ t('nav.about') }}</NuxtLinkLocale>
|
|
</li>
|
|
<li class="nav-link">
|
|
<NuxtLinkLocale href="/contact">{{ t('nav.contact') }}</NuxtLinkLocale>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const { t } = useI18n();
|
|
const siteTitleItems = ref<DropdownMenuItem[]>([
|
|
{
|
|
label: t('sites.wiki'),
|
|
icon: 'i-lucide-book-open-text',
|
|
to: 'https://wiki.unix.in.th'
|
|
},
|
|
{
|
|
label: t('sites.identity'),
|
|
icon: 'i-lucide-user',
|
|
to: 'https://identity.unix.in.th'
|
|
},
|
|
{
|
|
label: t('sites.forum'),
|
|
icon: 'i-lucide-messages-square',
|
|
to: 'https://forum.unix.in.th'
|
|
},
|
|
{
|
|
label: t('sites.status'),
|
|
icon: 'i-lucide-activity',
|
|
to: 'https://status.unix.in.th'
|
|
},
|
|
])
|
|
</script> |