# 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.