61 lines
1.9 KiB
Markdown
61 lines
1.9 KiB
Markdown
# 2026-03-24 Nav Swap: Transfers and Connections
|
|
|
|
## Background
|
|
|
|
The user wants to swap the visual order of the `传输` and `连接列表` entries in the left sidebar navigation.
|
|
|
|
## Goal
|
|
|
|
- Show `连接列表` above `传输` in the sidebar.
|
|
- Keep the order consistent on desktop and mobile sidebar layouts.
|
|
- Preserve existing navigation behavior, active-state highlighting, labels, and icons.
|
|
|
|
## Non-Goals
|
|
|
|
- Do not change routing structure or auth behavior.
|
|
- Do not change the default redirect to `/connections`.
|
|
- Do not refactor the sidebar into config-driven navigation.
|
|
- Do not make unrelated UI or style changes.
|
|
|
|
## Current State
|
|
|
|
In `frontend/src/layouts/MainLayout.vue`, the sidebar navigation currently renders:
|
|
|
|
1. `RouterLink` to `/transfers`
|
|
2. `RouterLink` to `/connections`
|
|
|
|
The default app entry remains `/connections` via `frontend/src/router/index.ts`.
|
|
|
|
## Selected Approach
|
|
|
|
Use the smallest possible template-only change:
|
|
|
|
- In `frontend/src/layouts/MainLayout.vue`, move the `RouterLink` block for `/connections` so it appears before the `RouterLink` block for `/transfers`.
|
|
|
|
This is preferred because it:
|
|
|
|
- solves the request directly,
|
|
- avoids unnecessary abstraction,
|
|
- keeps behavior unchanged,
|
|
- minimizes regression risk.
|
|
|
|
## Behavior Kept Unchanged
|
|
|
|
- `closeSidebar` still runs on click.
|
|
- Active-state classes based on `route.path` stay the same.
|
|
- `aria-label` values stay the same.
|
|
- Existing icons (`Server`, `ArrowLeftRight`) stay paired with the same entries.
|
|
- Terminal tab section remains below the main navigation items.
|
|
|
|
## Acceptance Criteria
|
|
|
|
- The sidebar shows `连接列表` first and `传输` second.
|
|
- Clicking either item still navigates to the same route.
|
|
- Active highlighting still works for both routes.
|
|
- Mobile sidebar uses the same order.
|
|
|
|
## Verification
|
|
|
|
- Run `npm run build` in `frontend/`.
|
|
- Manually confirm the sidebar order and route highlighting.
|