# fix\(web\): smooth settings sidebar transitions · PR \#9811 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/9811)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

State: merged

Source repository: pingdotgg/t3code

Source branch: t3code/settings-sidebar-motion

Target branch: main

Head commit: 5949f652891a8032d9a176b1b69101fce8f82a51

[Discussion and reviews](https://git.cafe/pingdotgg/t3code/pull/9811)

[Commits](https://git.cafe/pingdotgg/t3code/pull/9811/commits?format=markdown)

[Files changed](https://git.cafe/pingdotgg/t3code/pull/9811/diffs?format=markdown)

## Description

---

## Problem

The settings sidebar's existing nested section links appeared and disappeared instantly when changing pages. That made the otherwise stable sidebar jump during navigation.

## Fix

Preserve the current sidebar hierarchy, ordering, spacing, and search UI exactly as they are. Each existing nested section list now uses the shared collapsible primitive to animate between zero and its natural height over 150 ms. The primitive removes closed content from interaction and the accessibility tree, and reduced-motion users get the state change without a transition.

This is the first layer of the stack; subtle visible-section emphasis follows in [#9812](https://github.com/pingdotgg/t3code/pull/9812).

## UI evidence

The sidebar is intentionally unchanged at rest:

| Before | After |
| --- | --- |
| ![Before: existing nested settings sidebar](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/70920a192a4c7927/before-general.png) | ![After: the same nested settings sidebar](https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/b4fa467a4b4861be/reworked-motion-general.png) |

Before — nested sections snap between pages:

https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/8d50afd2cddbb42d/before-motion-clean-trimmed.webm

After — the same nested sections collapse and expand smoothly:

https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/11656b1370f699a5/final-motion-after.webm

## Verification

- `vp run --filter @t3tools/web typecheck`
- Focused formatting and lint for `SettingsSidebarNav.tsx`; lint exits successfully with the existing search-index effect warning
- Integrated Chromium pass across General, Appearance, and Connections
- Frame probe confirms both outgoing and incoming lists have intermediate heights during navigation, then settle to the existing dimensions
- Reduced-motion probe confirms the same navigation settles immediately
- Same-state screenshot comparison: SSIM 0.999232

Model and harness: GPT-5.6-Sol in T3 Code (Codex harness).