<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 class="flex sm:hidden w-fit items-center">
                    <UDropdownMenu
                        size="sm"
                        :items="siteTitleItems"
                        :content="{
                            align: 'end',
                            side: 'bottom',
                            sideOffset: 8
                        }"
                        :ui="{
                            content: 'w-36'
                        }"
                    >
                        <UButton size="sm" label="บริการ" icon="i-lucide-map" color="neutral" variant="outline" />
                    </UDropdownMenu>
                </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="mobileNavbar ? 'i-lucide-x' : '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>