<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>
