104 lines
3.9 KiB
Vue
Executable File
104 lines
3.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="/logo.svg" 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="เข้าร่วม 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="บริการของ unix.in.th" 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 w-full">
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-link" @click="toggleMobileNavbar">
|
|
<NuxtLink href="/">หน้าหลัก</NuxtLink>
|
|
</li>
|
|
<li class="nav-link">
|
|
<NuxtLink href="/about">เกี่ยวกับ</NuxtLink>
|
|
</li>
|
|
<li class="nav-link">
|
|
<NuxtLink href="/contact">ติดต่อ</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex sm:hidden w-fit float-right">
|
|
<UButton @click="toggleMobileNavbar" size="sm" variant="subtle" color="neutral" icon="i-lucide-menu"/>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<nav v-if="mobileNavbar">
|
|
<div class="flex flex-col">
|
|
<ul class="nav navbar-nav-mobile">
|
|
<li class="nav-link">
|
|
<NuxtLink href="/">หน้าหลัก</NuxtLink>
|
|
</li>
|
|
<li class="nav-link">
|
|
<NuxtLink href="/about">เกี่ยวกับ</NuxtLink>
|
|
</li>
|
|
<li class="nav-link">
|
|
<NuxtLink href="/contact">ติดต่อ</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const siteTitleItems = ref<DropdownMenuItem[]>([
|
|
{
|
|
label: 'วิกิ',
|
|
icon: 'i-lucide-book-open-text',
|
|
to: 'https://wiki.unix.in.th'
|
|
},
|
|
{
|
|
label: 'ระบบบัญชี',
|
|
icon: 'i-lucide-user',
|
|
to: 'https://identity.unix.in.th'
|
|
},
|
|
{
|
|
label: 'ลานประชาคม',
|
|
icon: 'i-lucide-messages-square',
|
|
to: 'https://forum.unix.in.th'
|
|
},
|
|
{
|
|
label: 'สถานะ',
|
|
icon: 'i-lucide-activity',
|
|
to: 'https://status.unix.in.th'
|
|
},
|
|
])
|
|
|
|
const mobileNavbar = ref(false);
|
|
function toggleMobileNavbar() {
|
|
mobileNavbar.value = !mobileNavbar.value
|
|
}
|
|
const route = useRoute()
|
|
watch(() => route.fullPath, () => {
|
|
mobileNavbar.value = false
|
|
})
|
|
</script> |