<template>
  <UPage>
    <div
      class="w-64 bg-white dark:bg-gray-900
      flex flex-col h-screen border-r border-gray-200 dark:border-gray-700
      overflow-hidden"
    >
      <div class="flex-shrink-0 p-4 border-gray-200 dark:border-gray-700">
        <!-- Logo -->
        <LogoPro />
      </div>

      <!-- Search Box -->
      <div class="p-4 border-gray-200 dark:border-gray-700">
        <ClientOnly>
          <UContentSearchButton
            :collapsed="false"
            label="搜索文档"
            class="w-full"
            color="primary"
          />
        </ClientOnly>
      </div>

      <!-- 可滚动的导航区域 -->
      <div class=" h-full overflow-y-auto ">
        <!-- 导航 Section -->

        <div>
          <NuxtLink
            to="/"
            class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
            :class="{
              ' text-blue-600 dark:text-blue-400 ':
                $route.path === '/'
            }"
          >
            <Icon
              name="lucide-home"
              class="text-primary mr-2"
              size="20"
            />
            站点首页
          </NuxtLink>
          <div class="px-2">
            <DocsAsideLeftTop />
          </div>
        </div>

        <!-- 分隔线 -->
        <div class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-7/9 mx-5" />

        <!-- 文档目录导航 -->
        <div class="mt-6 flex items-center justify-start pl-4 w-full">
          <UContentNavigation
            highlight
            :navigation="navigation"
            color="primary"
            type="single"
            variant="pill"
          />
        </div>
      </div>
    </div>
  </UPage>
</template>

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

const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
</script>
