本文档介绍了 Hydra 基于 React 的前端中的侧边栏组件和导航系统。侧边栏作为主要的导航界面，显示导航路由、用户库、收藏夹，并提供过滤功能。有关设置面板和配置管理的信息，请参阅 设置系统。
侧边栏在 src/renderer/src/components/sidebar/sidebar.tsx中实现为单个 React 组件，该组件负责管理多个独立的部分和功能。
来源：src/renderer/src/components/sidebar/sidebar.tsx37-312
侧边栏使用 React Router 实现基于路由的导航系统。导航路由在单独的路由配置文件中定义并动态渲染。
导航菜单渲染带有活动状态指示器的每个路由
| 功能 | 实现 | 位置 |
|---|---|---|
| 路由配置 | routes.map() 迭代 | sidebar.tsx215-231 |
| 活动状态检测 | location.pathname === path | sidebar.tsx219 |
| 导航处理程序 | handleSidebarItemClick() | sidebar.tsx160-164 |
| 路由渲染 | 动态 render() 函数 | sidebar.tsx227 |
来源：src/renderer/src/components/sidebar/sidebar.tsx215-231 src/renderer/src/components/sidebar/sidebar.tsx160-164
侧边栏提供全面的游戏库管理，具有过滤功能和状态显示。
侧边栏实现多种过滤机制
| 过滤器类型 | 功能 | 标准 |
|---|---|---|
| 文本过滤器 | handleFilter | 游戏标题包含输入文本 |
| 可玩过滤器 | isGamePlayable | 游戏具有 executablePath |
| 收藏夹过滤器 | 内置 | game.favorite === true |
文本过滤不区分大小写，并使用 toLocaleLowerCase() 进行比较 sidebar.tsx99-107
getGameTitle 函数提供动态状态显示
来源：src/renderer/src/components/sidebar/sidebar.tsx144-158 src/renderer/src/components/sidebar/sidebar.tsx99-107 src/renderer/src/components/sidebar/sidebar.tsx35
侧边栏实现了一个可调整大小的界面，可通过鼠标进行宽度调整，并支持持久化存储。
| 常量 | 值 | 目的 |
|---|---|---|
SIDEBAR_MIN_WIDTH | 200px | 侧边栏最小宽度 |
SIDEBAR_MAX_WIDTH | 450px | 侧边栏最大宽度 |
SIDEBAR_INITIAL_WIDTH | 250px | 首次加载时的默认宽度 |
调整大小逻辑包括边界检查和持久化存储 sidebar.tsx29-31 sidebar.tsx118-142
来源：src/renderer/src/components/sidebar/sidebar.tsx29-31 src/renderer/src/components/sidebar/sidebar.tsx90-97 src/renderer/src/components/sidebar/sidebar.tsx118-142
侧边栏与多个系统组件和外部服务集成。
| 集成 | 目的 | 实现 |
|---|---|---|
| 好友请求 | 实时通知计数 | window.electron.onSyncFriendRequests |
| 游戏启动 | 双击执行游戏 | window.electron.openGame |
| 下载进度 | 实时状态更新 | useDownload hook |
| 订阅功能 | 高级 UI 元素 | hasActiveSubscription 检查 |
侧边栏响应好友请求同步事件，并相应地更新 Redux 状态 sidebar.tsx75-83
来源：src/renderer/src/components/sidebar/sidebar.tsx8-13 src/renderer/src/components/sidebar/sidebar.tsx75-83 src/renderer/src/components/sidebar/sidebar.tsx166-190 src/renderer/src/components/sidebar/sidebar.tsx292-303