<script setup>
    import { fetchMainNavigationMenu } from "../utils/fetch_data";
    import {reactive, onMounted} from "vue";
    const menu = reactive([]);
    onMounted(async () => {
        const menu_data = await fetchMainNavigationMenu();
        menu.splice(0, menu.length, ...menu_data);
    });
</script>
<template>
    <nav class="flex items-center w-full my-4 justify-between">
        <UNavigationMenu :items="menu" :ui="{root: 'w-full'}">
            <template #list-leading>
                <!-- Logo slot: adjust height to match menu bar as desired -->
                <span class="font-bold text-xl tracking-tight text-primary">Lorem Ipsum</span>
            </template>
        </UNavigationMenu>
    </nav>
</template>