ssh-manager/docs/superpowers/specs/2026-03-24-nav-swap-design.md

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.