How to edit with of nuxt ui navigation menu

<template>
    <div class="fixed top-0 left-0 z-50 px-2">
        <div class="fixed top-0 left-0 shadow-lg w-full h-12"></div>
        <UNavigationMenu highlight :items="items" class="text-white">
        </UNavigationMenu>
    </div>
    <UAlert v-if="enableAlert" :title="alertMessage" class="fixed top-12"/>
    
</template>

<script setup lang="js">
import { inject } from 'vue';
import { Ref } from 'vue';


const alertMessage = inject<Ref<string>>('alertMessage')
const enableAlert = inject<Ref<boolean>>('enableAlert')

// navigation item
const items = [
    {
        label:'Home',
        to: '/'
    },
    {
        label:'About',
        to: '/about'
    },
    {
        label:'Examples',
        children: [
            {
                label: 'messageApp',
                to: '/message'
            }
        ]
    },
    {
        label:'Projects',
        to: '/projects'
    },
    {
        label:'For \"you\"',
        to: '/you'
    }
]

</script>

<template>
    <div class="fixed top-0 left-0 z-50 px-2">
        <div class="fixed top-0 left-0 shadow-lg w-full h-12"></div>
        <UNavigationMenu highlight :items="items" class="text-white">
        </UNavigationMenu>
    </div>
    <UAlert v-if="enableAlert" :title="alertMessage" class="fixed top-12"/>
    
</template>

<script setup lang="js">
import { inject } from 'vue';
import { Ref } from 'vue';


const alertMessage = inject<Ref<string>>('alertMessage')
const enableAlert = inject<Ref<boolean>>('enableAlert')

// navigation item
const items = [
    {
        label:'Home',
        to: '/'
    },
    {
        label:'About',
        to: '/about'
    },
    {
        label:'Examples',
        children: [
            {
                label: 'messageApp',
                to: '/message'
            }
        ]
    },
    {
        label:'Projects',
        to: '/projects'
    },
    {
        label:'For \"you\"',
        to: '/you'
    }
]

</script>