sidebar.tsx

概述

书籍侧边栏导航组件，提供桌面端和移动端的书籍目录导航、章节搜索、书签管理和语言切换功能。

组件

BookSidebar

桌面端书籍侧边栏主组件。

功能特性：

• 捐赠按钮（Stripe 链接）
• PDF 下载链接
• 章节搜索功能
• 语言切换下拉菜单
• 可滚动章节导航
• 书签管理（悬停显示）

使用的 hooks：

• useTranslations("book") - 书籍相关翻译
• useLocale() - 获取当前语言
• useBookmark() - 书签状态管理
• useState() - 搜索查询状态

示例：

import { BookSidebar } from "@/components/book/sidebar";

export default function BookLayout() {
  return (
    <div className="flex">
      <BookSidebar />
      <main>{/* 内容 */}</main>
    </div>
  );
}

---

MobileTOCButton

移动端目录按钮组件，在 Sheet（侧边抽屉）中显示章节导航。

功能特性：

• 底部弹出的 Sheet 容器
• 搜索输入框（带清除按钮）
• 可滚动的章节列表
• 书签保存功能

示例：

import { MobileTOCButton } from "@/components/book/sidebar";

export default function MobileHeader() {
  return (
    <header className="lg:hidden">
      <MobileTOCButton />
    </header>
  );
}

---

SidebarContent

侧边栏内容渲染组件（内部使用）。

Props：

属性	类型	描述
onNavigate	() => void	导航回调（用于移动端关闭 Sheet）
searchQuery	string	搜索查询字符串
bookmark	`string \	null`	当前书签的章节 slug
onBookmark	(slug: string) => void	设置/取消书签回调

---

useBookmark

书签自定义 Hook。

返回值：

属性	类型	描述
bookmark	`string \	null`	当前保存的书签 slug
saveBookmark	(slug: string) => void	保存书签
clearBookmark	() => void	清除书签

存储键名： book-reading-progress

示例：

const { bookmark, saveBookmark, clearBookmark } = useBookmark();

// 保存当前章节
saveBookmark("introduction");

// 检查是否有书签
if (bookmark) {
  console.log(`继续阅读: ${bookmark}`);
}

支持的语言

组件内置 17 种语言支持：

代码	语言
en	English
zh	中文
es	Español
pt	Português
fr	Français
de	Deutsch
nl	Dutch
it	Italiano
ja	日本語
tr	Türkçe
az	Azərbaycan dili
ko	한국어
ar	العربية
fa	فارسی
ru	Русский
he	עברית
el	Ελληνικά

搜索功能

搜索匹配以下字段：

• 翻译后的章节标题
• 原始章节标题
• 章节 slug
• 章节描述

依赖

• next/link - 客户端导航
• next/navigation - 路由信息
• next-intl - 国际化
• @/lib/book/chapters - 章节数据
• @/components/ui/* - UI 组件（Sheet、ScrollArea、Button、Input、DropdownMenu）