[Bug]: Navigation Menu (sidebar) CSS transition is janky with sharp corners

[RayBB]

⚠️ This issue respects the following points: ⚠️

• This is a bug, not a question or a configuration/webserver/proxy issue.
• This issue is not already reported on Github OR Nextcloud Community Forum (I've searched it).
• Nextcloud Server is up to date. See Maintenance and Release Schedule for supported versions.
• I agree to follow Nextcloud's Code of Conduct.

Bug description

When you collapse a navigation menu there is a moment of jank where everything is overlapped, and the corner is sharp and looks bad. You can see it in this video.

This only occurs on the desktop view, the transition works nice if you have a smaller viewport.

I know this isn't a big issue and questioned if it is even worth reporting but I see so many people complain NC is buggy and has all these problems. While I haven't felt that myself, I do feel that having UI issues like this can contribute to that feeling.

I couldn't find another issue reporting this but I'm not even entirely sure if this is the right repo.

I'd be happy to take a look and submit a PR. I'd just like to make sure this hasn't been fixed yet on the latest branch and the issue matters enough that someone would review it before I try getting a dev environment setup.

I think the file that will need to be changed is apps.scss

Edit: Actually NcAppNavigation.vue in nextcloud-libraries/nextcloud-vue should be changed.

This fix seems to be to change &--close to be just margin-left: -300px; (or margin-left: $navigation-width). For mobile to look nice we also need to remove the :not portion of this line.

Video of fix

Tasks.-.Storage.Share.-.4.March.2024.mp4

Screenshot of the moment of jank

PS: I also posted about this on lemmy and reddit.

Steps to reproduce

1. Go to tasks, contacts, or any app with a collapsible sidebar
2. Collapse and open it

Expected behavior

It collapses smoothly

Installation method

None

Nextcloud Server version

27

Operating system

None

PHP engine version

None

Web server

None

Database engine version

None

Is this bug present after an update or on a fresh install?

None

Are you using the Nextcloud Server Encryption module?

None

What user-backends are you using?

• Default user-backend (database)
• LDAP/ Active Directory
• SSO - SAML
• Other

Configuration report

No response

List of activated Apps

No response

Nextcloud Signing status

No response

Nextcloud Logs

No response

Additional info

No response

[solracsf]

Thanks for your report. 👍

You should indeed:

1. Test with latest master branch first. There is a Docker image available to easily deploy it.
2. Submit your PR to https://github.com/nextcloud-libraries/nextcloud-vue

[RayBB]

Confirmed it on master with your image. Your image makes it every easy so thanks!

Will look into contributing to nextcloud-vue following their development setup guide.