SiteHeader.vue

<template>
    <header class="p-10">
        <div class="md:flex md:justify-between md:items-center">
            <a href="/" title="" class="block hover:opacity-60">
                <!-- <img :src="fileUrl(global.seo_image.id)" :alt="global.site_name" class="w-12" /> -->
            </a>
            <!-- <pre>{{global.navigation[0]}}</pre> -->
            <!-- <ul v-if>
                <li v-for="(item,index) in global.navigation" :key="index">
                    {{ item.label.value }}
                </li>
            </ul> -->
            <nav class="text-lg flex gap-6" v-if="global?.navigation">
                <NuxtLink 
                    v-for="(item, index) in global.navigation" :key="index"
                    :to="item.url" 
                    :title="item.description">
                    {{item.label}}
                </NuxtLink>
            </nav>
            <div class="flex gap-5 items-center">
                <DarkModeToggle class="text-gray-500 hover:text-gray-400" />
                <LoginForm v-if="!isLoggedIn" />
                <Auth v-else />
            </div>
        </div>
    </header>
</template>
<script setup>
    import { storeToRefs } from 'pinia'
    import { useAuth } from '~~/store/auth'
    const auth = useAuth()
    const { isLoggedIn, user } = storeToRefs(auth)
    const { $directus } = useNuxtApp()
    const { fileUrl } = useFiles()
    const global = ref({})
    const loading = ref(false)

    async function fetchGlobal() {
        loading.value = true
        try {
            const { data } = await $directus.items('global').readByQuery({
                fields: ["*.*"]
            })
            global.value = data
        } catch (e) {
            console.error(e)
        } finally {
            loading.value = false
        }
    }

    onMounted(() => {
        fetchGlobal()
    })
</script>