Animate sidebar tabs like navigation entries

[jancborchardt]

Same as #8685 but for the sidebar tabs.

☑️ Resolves

• Part of More animations for a more fluent interface (see content for examples) nextcloud/server#47739

🖼️ Screenshots

🏚️ Before

Screencast.From.2026-07-30.07-43-34.webm

🏡 After

Screencast.From.2026-07-30.17-02-40.webm

Just for the record: Previous versions with different active / highlight color

Screencast.From.2026-07-30.07-33-28.webm

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

[codecov]

Codecov Report

❌ Patch coverage is 98.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 53.81%. Comparing base (0dad83c) to head (d97acc3).

Files with missing lines	Patch %	Lines
src/components/NcAppSidebar/NcAppSidebarTabs.vue	97.43%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8793      +/-   ##
==========================================
+ Coverage   53.31%   53.81%   +0.50%     
==========================================
  Files         109      112       +3     
  Lines        3697     3837     +140     
  Branches     1083     1121      +38     
==========================================
+ Hits         1971     2065      +94     
- Misses       1472     1504      +32     
- Partials      254      268      +14     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[kra-mo]

Looks really good, with the bounce and crossfade of the icons too. Although how come the hover color is different from the selection color?

[jancborchardt]

Although how come the hover color is different from the selection color?

@kra-mo I was experimenting a bit with tinting, and having them different. But am open to change it. It would probably indeed look more seamless if it's all the same color. In that case should it be grey or tinted?

[kra-mo]

@jancborchardt I like the tint :)

[jancborchardt]

@kra-mo indeed it looks much better with tint across the board. :) Adjusted and updated the screencast in the original post.