feat(Sidebar): add transition prop

[benjamincanac]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Add a transition prop to USidebar (defaults to true) thate collapse/expand animation. Follows the same pattern as UModal's transition prop.

• Move transition classes from base theme slots into a transition: true variant
• Switch easing from ease-linear to ease-out for a more natural feel

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR introduces conditional transition styling to the Sidebar component. A new optional transition prop (defaulting to true) is added to the SidebarProps interface and wired through the component's withDefaults and ui configuration. The sidebar theme configuration is updated to remove unconditional transition utilities from slot classes and instead conditionally apply them only when the transition option is enabled, with specific transitions for width, position, and color changes across the gap, container, and rail slots.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding a transition prop to the Sidebar component.
Description check	✅ Passed	The description is directly related to the changeset, providing context about the new transition prop, implementation approach, and design rationale.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/sidebar-transition

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/runtime/components/Sidebar.vue

Parsing error: Unexpected token )

src/theme/sidebar.ts

Parsing error: Unexpected token {

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/theme/sidebar.ts`:
- Around line 20-26: The transition: true variant in src/theme/sidebar.ts
currently unconditionally adds animation classes; update the variant generation
to respect the global options.theme.transitions toggle by returning no
transition classes (or an empty/disabled variant) when options.theme.transitions
is false. Locate the transition: { true: { ... } } entry and change its
implementation to check options.theme.transitions (the global toggle) and only
include gap/container/rail classes when that flag is true, otherwise omit or
return empty strings so animations are effectively disabled.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5647cd1a-f5d5-4d39-9152-5e19bc6abbb1

📥 Commits

Reviewing files that changed from the base of the PR and between 09f9cd0 and e8de2ad.

⛔ Files ignored due to path filters (2)

• test/components/__snapshots__/Sidebar-vue.spec.ts.snap is excluded by !**/*.snap
• test/components/__snapshots__/Sidebar.spec.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (2)

• src/runtime/components/Sidebar.vue
• src/theme/sidebar.ts

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6484

commit: e8de2ad