# Desktop Sidebar Navigation Design

## Summary

The desktop pages for AI问答, AI写作, 安全培训, 隐患提示, and 考试工坊 should share one left-side navigation sidebar. The AI写作, 安全培训, and 考试工坊 sidebar buttons must mirror the existing mode buttons below the Chat input, not route to the standalone legacy pages.

## Selected Approach

Use option 1: extend `shudao-vue-frontend/src/components/Sidebar.vue`.

This keeps the change centralized. The existing pages already import and render `<Sidebar />`, so updating the shared component adds the navigation buttons consistently. `Chat.vue` passes its current mode into the sidebar and handles sidebar mode selections with the same `setMode()` function used by the input-area buttons.

## Target Routes

The sidebar will expose these route buttons:

| Label | Behavior | Route fallback |
| --- | --- | --- |
| AI问答 | Chat mode `ai-qa` when already on Chat | `/chat` |
| 隐患提示 | Route to the independent 隐患提示 page | `/hazard-detection` |
| AI写作 | Chat mode `ai-writing` when already on Chat | `/chat?mode=ai-writing` |
| 安全培训 | Chat mode `safety-training` when already on Chat | `/chat?mode=safety-training` |
| 考试工坊 | Chat mode `exam-workshop` when already on Chat | `/chat?mode=exam-workshop` |

All target routes and Chat mode-query initialization already exist, so no router-table changes are required.

## Component Design

`Sidebar.vue` will become data-driven:

- Define a `navItems` array containing label, route name, legacy path, icon, optional Chat mode, and route fallback target.
- Render the menu with `v-for`.
- If the current page is Chat and the nav item has a Chat mode, emit `select-mode` instead of routing.
- Otherwise use `router.push(item.target)`.
- Use the current route name plus the active Chat mode to apply the active style.
- Keep the logo click behavior that routes back to `/`.

This avoids duplicated template blocks and keeps the sidebar behavior aligned with the existing Chat mode chips.

## Visual Design

The sidebar will keep the existing desktop layout:

- Fixed narrow left rail, currently 80px wide.
- Logo at the top.
- Vertical navigation items below the logo.
- Each button uses an icon above the text.
- Hover state uses a subtle translucent highlight.
- Active state uses stronger icon highlight, slight scale, white text, and stronger font weight.

The user referenced an image for button style, but the image is not available in the current conversation context. Implementation will therefore match the existing `Sidebar.vue` visual language. If the image is provided later, the visual tokens can be adjusted without changing the routing logic.

## Affected Pages

These existing desktop pages should receive the updated sidebar automatically because they already render `<Sidebar />`:

- `shudao-vue-frontend/src/views/Chat.vue`
- `shudao-vue-frontend/src/views/AIWriting.vue`
- `shudao-vue-frontend/src/views/SafetyHazard.vue`
- `shudao-vue-frontend/src/views/HazardDetection.vue`
- `shudao-vue-frontend/src/views/ExamWorkshop.vue`

Mobile navigation is out of scope because mobile already has separate tab and drawer components.

## Testing

Implementation should be verified with:

- A focused component test or equivalent static test that confirms the sidebar renders the five navigation labels and marks the current route active.
- A build check for the Vue frontend.
- Manual navigation verification on `/chat`, `/ai-writing`, `/safety-hazard`, `/hazard-detection`, and `/exam-workshop`.

## Out Of Scope

- Adding new backend APIs.
- Changing mobile navigation.
- Redesigning the history sidebar.
- Creating new route pages.