feat: 新增全局侧边栏导航组件

This commit is contained in:
kennethcheng 2026-04-27 14:25:47 +08:00
parent 7344e8a4c0
commit f49f5f4a0d

View File

@ -0,0 +1,19 @@
---
import { getCollection } from 'astro:content';
// Astro v6 中获取所有文档
const docs = await getCollection('docs');
---
<aside class="w-64 bg-gray-50 dark:bg-gray-800/30 border-r border-gray-200 dark:border-gray-800 h-screen sticky top-0 overflow-y-auto p-6 flex-shrink-0 hidden md:flex flex-col">
<div class="font-extrabold text-lg mb-6 text-gray-900 dark:text-white tracking-tight">📚 知识库导航</div>
<nav class="flex flex-col gap-1.5">
<a href="/" class="text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors px-2 py-1.5">
🏠 返回首页
</a>
<div class="my-2 border-t border-gray-200 dark:border-gray-700/50"></div>
{docs.map(doc => (
<a href={`/docs/${doc.id}`} class="text-sm text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 px-2 py-1.5 rounded-md transition-all truncate">
{doc.data.title || doc.id}
</a>
))}
</nav>
</aside>