beehive/app/components/AppHeader.vue

<script lang="ts" setup>
import type {NavigationMenuItem} from '@nuxt/ui'

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [{
  label: '首页',
  to: '/docs/getting-started',
  icon: 'i-lucide-book-open',
  active: route.path.startsWith('/docs/getting-started')
}, {
  label: '产品与服务',
 
  icon: 'i-lucide-box',
  active: route.path.startsWith('/docs/components'),
  children: [
    {label: '智慧蜂场建设', to: '/hive'},
    {label: '智能蜂箱研制', to: '/hive'},
    {label: '质量安全溯源', to: '/hive'},
    {label: '蜂产业大数据', to: '/sensors'},
    {label: '知识服务中心', to: '/sensors'},
  ]
}, {
  label: '应用实例',
  icon: 'i-simple-icons-figma',
  to: 'https://go.nuxt.com/figma-ui',
  target: '_blank'
}, {
  label: '典型案例',
  icon: 'i-lucide-rocket',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}, {
  label: '新闻资讯',
  to: '/docs/components',
  icon: 'i-lucide-box',
  active: route.path.startsWith('/docs/components')
}, {
  label: '关于我们',
  to: '/docs/components',
  icon: 'i-lucide-box',
  active: route.path.startsWith('/docs/components')
}, {
  label: '联系我们',
  to: '/docs/components',
  icon: 'i-lucide-box',
  active: route.path.startsWith('/docs/components')
},])
</script>

<template>
  <UHeader>
    <template #title>
      <Logo class="h-6 w-auto"/>
    </template>

    <UNavigationMenu :items="items"/>

    <!--    <template #right>-->
    <!--      <view>-->
    <!--        -->
    <!--      </view>-->
    <!--    </template>-->

    <template #body>
      <UNavigationMenu :items="items" class="-mx-2.5" orientation="vertical"/>
    </template>
  </UHeader>
</template>