<template>
  <UDashboardGroup>
    <UDashboardSidebar id="default" :open="sidebarOpen" collapsible resizable>
      <template #header="{ collapsed }">
        <div class="font-bold flex items-center">
          <img src="/Logo.svg" alt="YPHS Alumni" class="h-8">
          <span class="ml-2" v-if="!collapsed">永平中学校友会官网</span>
        </div>
      </template>

      <template #default="{ collapsed }">
        <UDashboardSearchButton :collapsed="collapsed" icon="mdi:magnify" class="bg-transparent ring-default" />

        <UNavigationMenu :collapsed="collapsed" :items="sidebarLinks" orientation="vertical" tooltip popover />
      </template>

      <template #footer="{ collapsed }">
      </template>
    </UDashboardSidebar>

    <UDashboardSearch :groups="groups" />

    <slot />

  </UDashboardGroup>
</template>

<script lang="ts" setup>
const sidebarOpen = ref(false);

const groups = ref([]);

const { sidebarLinks } = useDashboardSidebarLinks();

const route = useRoute();

// 🪄 自动根据路由 name 或 meta 显示标题
const pageTitle = computed(() => {
  // 如果路由定义了 meta.title 优先用它，否则用 name
  return route.meta.title || route.name || '首页'
})
</script>

<style></style>