fix: sidebar styling

[adkah]

Minor styling fixes for sidebar.

[greptile-apps]

Greptile Summary

This PR makes minor sidebar polish fixes: it widens icon-label gaps from gap-1.5 to gap-2 consistently across all sidebar elements, extends the active-link indicator line to all nested depths (not just depth 1), and adds transition:persist to both Sidebar and MobileSidebar so their DOM nodes and scroll positions survive Astro view transitions.

• Gap change (gap-1.5 → gap-2): purely cosmetic, applied uniformly to NestedCategory, ChildNode, and the top-level section heading in SidebarTreeView.
• Active-line depth (depth === 1 → depth >= 1): now renders the primary-coloured indicator line for active links at every nesting level; the indicator's hardcoded before:left-2.5 position may not align visually at depth 2+.
• transition:persist: preserves sidebar scroll state across page navigations but prevents NestedCategory from re-initialising its expanded state, so a collapsed section won't auto-expand when the user navigates into it.

Confidence Score: 3/5

The transition:persist change is safe for scroll preservation but introduces a navigation regression where collapsed sidebar sections won't auto-expand when linking into them.

The transition:persist addition preserves sidebar DOM across page transitions, a good UX improvement for scroll position. However, NestedCategory relies on useState(selfActive || childActive) — an initialiser that only fires on first mount — so any collapsed category won't auto-expand during subsequent in-app navigation, leaving users without a visible active section cue.

src/layouts/DocsLayout.astro deserves a second look because the transition:persist interaction with React state initialisation in sidebar-tree-view.tsx is the core risk here.

Important Files Changed

Filename	Overview
src/components/sidebar-tree-view.tsx	Gap widened from 1.5 to 2 across all sidebar text/icon pairs; active-line indicator extended from depth === 1 to depth >= 1, which may visually misalign at depth 2+.
src/layouts/DocsLayout.astro	Adds transition:persist to MobileSidebar and Sidebar, preserving scroll state across Astro view transitions but preventing NestedCategory from auto-expanding on navigation.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User navigates to new page\nAstro View Transition] --> B{transition:persist\non Sidebar?}
    B -- Before PR\nNo --> C[Sidebar unmounts & remounts]
    C --> D[NestedCategory useState\ninitialised from selfActive\n OR childActive]
    D --> E[Correct category auto-expands]
    B -- After PR\nYes --> F[Sidebar DOM persisted]
    F --> G[currentPath prop updates\nactive highlight refreshes]
    G --> H{Was target category\nalready expanded?}
    H -- Yes --> I[Correct category visible]
    H -- No --> J[expanded state unchanged\nCategory stays collapsed]

Loading

_{Reviews (1): Last reviewed commit: "fix: sidebar styling" | Re-trigger Greptile}