fix(NcAppSidebar): animation glitch on toggle

[RayBB]

Signed-off-by: RayBB RayBB@users.noreply.github.com

☑️ Resolves

• Fix [Bug]: Navigation Menu (sidebar) CSS transition is janky with sharp corners nextcloud/server#43969

Apologies, I cannot test this outside of the browser devtools because of #5339 but it is a simple enough change I hope someone else can help test/verify until I can get a local instance working. Thanks!

Edit: Finally I was able to test in a local instance and it worked great, looks the same as the video I put below.

🖼️ Screenshots

The "after" video shows before/after

🏚️ Before	🏡 After
	https://github.com/nextcloud/server/assets/921217/0303ae9c-a791-4ed1-98c1-0755f81aa259

🚧 Tasks

• ...

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[ShGKme]

Very cool, thanks!

Slowed down to better see the difference:

Before	After

This could be a little bit slower than before in performance, because it causes animation is width change of the main content, triggering resize observers. But should be fine, NcAppSidebar does similar change.

If this accurse bad for performance, we can make it absolute during animation:

[ShGKme]

/backport to next

[skjnldsv]

Please also check this works on very narrow screens like mobile at 320/400px

[RayBB]

@ShGKme I updated to fix this for the mobile case.

What master looks like now on small screens

small.mp4

And here is what it looks like desktop/mobile with my current changes.

Files.-.Nextcloud.-.20.March.2024.1.mp4

Please let me know if I should change anything else. Cleaning up commits now.

[ShGKme]

Great

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 38.62%. Comparing base (6f1a4c9) to head (957f0ac).
Report is 289 commits behind head on master.

❗ Current head 957f0ac differs from pull request most recent head 85f19d5. Consider uploading reports for the commit 85f19d5 to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5389      +/-   ##
==========================================
- Coverage   39.34%   38.62%   -0.72%     
==========================================
  Files         139      142       +3     
  Lines        3688     4958    +1270     
  Branches      810     1497     +687     
==========================================
+ Hits         1451     1915     +464     
- Misses       2021     2954     +933     
+ Partials      216       89     -127     

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

[ShGKme]

I've rebased the branch onto master to check if dependency updates help with Cypress error on CI.

[susnux]

/backport to next

[backportbot]

The backport to next failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout next
git pull origin next

# Create the new backport branch
git checkout -b backport/5389/next

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts, resolve them
git cherry-pick 85f19d51

# Push the cherry pick commit to the remote repository and open a pull request
git push origin backport/5389/next

Error: Failed to create pull request: Validation Failed: {"resource":"PullRequest","code":"custom","message":"A pull request already exists for nextcloud-libraries:backport/5389/next."}

---

Learn more about backports at https://docs.nextcloud.com/server/stable/go.php?to=developer-backports.