fix(nav): polish cloud side-nav collapse animation#3606
Draft
bilal-karim wants to merge 2 commits into
Draft
Conversation
The Cloud nav header reflowed from a single row (expanded) into a stacked column (collapsed: flex-col + gap-2, dropping min-h-7), changing its height. Because the nav icon list sits directly below the header, the icons shifted vertically on every expand/collapse. Keep the header a constant-height single row in both states: pin min-h-7, hide the logo/subtitle block when collapsed, and center the toggle. The icon list's top edge no longer moves. OSS nav bar is unaffected. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The label already cross-faded via transition-opacity, but it ran concurrently with the container's width animation, so the half-faded text was clipped by the narrowing rail and read as a slide. Sequence it instead: fade out fast on collapse (duration-100, no delay) and delay the fade-in on expand until the rail has widened (delay-100), so the label reads as a clean fade in both directions. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
bilal-karim
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Polishes the Cloud side-nav expand/collapse transition. Two related fixes:
1. Stable header height (
cloud-nav-bar.svelte, Cloud-only)When the nav collapsed, its header reflowed from a single row into a stacked column (
group-data-[nav=closed]:flex-col gap-2, whilemin-h-7was dropped). That changed the header's height, and because the nav icon list sits directly below it, every icon shifted vertically on each expand/collapse. Fix: keep the header a constant-height single row in both states (pinmin-h-7, hide the logo/subtitle block when collapsed, center the toggle). The OSS nav bar is a separate component and is untouched.2. Fade labels instead of clipping them (
navigation-item.svelte, shared)The label already cross-faded via
transition-opacity, but it ran concurrently with the container's width animation, so the half-faded text was clipped by the narrowing rail and read as a slide. Fix: sequence it — fade out fast on collapse (duration-100, no delay) and delay the fade-in on expand until the rail has widened (delay-100), so the label reads as a clean fade in both directions. This file is shared by the OSS nav bar, so the improved fade applies there too.Context
Surfaced while adding a width transition to the Cloud side nav in cloud-ui: once the width animated smoothly, both the icons' vertical jump and the labels' clip-slide became obvious. These remove the rough edges at the source.
Testing
Visually verified in cloud-ui (via a locally rebuilt tarball) across expanded and collapsed states for project/namespace nav and the Cloud root.
🤖 Generated with Claude Code