UNavigationMenu not showing in mobile view of UHeader

 WARN  [Vue warn]: Failed to resolve component: UNotifications                                                                                                          7:23:37 PM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <Index>
at <RouteProvider>
at <RouterView>
at <NuxtPage>
at <ToastProvider>
at <Toaster>
at <TooltipProvider>
at <ConfigProvider>
at <App>
at <App>
at <NuxtRoot>
 WARN  [Vue warn]: Component <Anonymous> is missing template or render function. at <Anonymous>                                                                         7:23:37 PM
at <Index>
at <RouteProvider>
at <RouterView>
at <NuxtPage>
at <ToastProvider>
at <Toaster>
at <TooltipProvider>
at <ConfigProvider>
at <App>
at <App>
at <NuxtRoot>

<template>
    <UHeader>
        <template #title>
            <NuxtLink to="/" class="text-2xl font-bold text-green-400 hover:text-orange-500 transition-colors">
                Orangegreencat SMP
            </NuxtLink>

            
        </template>

        <UNavigationMenu :items="navItems" />
        
        <template #right>
            

            <UButton icon="lucide:log-in">Join the discord</UButton>
        </template>
    </UHeader>
</template>

<script setup lang="ts">

const navItems = ref([
    {
        label: "Rules",
        to: '/rules'
    },
    {
        label: "Laws",
        to: '/laws'
    },
    {
        label: "Mod List",
        to: '/mods'
    },
    {
        label: "Change Log",
        to: '/changelog'
    },
])
</script>

<template>
  <UApp>
    <div class="min-h-screen bg-gray-950 text-white">
      <MainHeader />
      <NuxtPage /> 
      <TheFooter />
    </div>
  </UApp>
</template>