fix(NcAppSidebar): make closing animation less glitchy

[ShGKme]

☑️ Resolves

• Fixes a number of issues with animations:
  1. Sidebar doesn't slide right, it becomes "narrow", actually moving content inside (especially with multiline title)
  2. There is a moment when there is close and open at the same position, because the close button is not moving
  3. It was not width but max-width animated. It means that if max-width: 500px and the current width is 27vw = 400px - there is no animation for the first 100px making a delay
     • @marcoambrosini this also probably fixes your PR
  4. New --app-sidebar-offset changes too immediate, making a jump effect

🖼️ Screenshots

🏚️ Before	🏡 After

🚧 Tasks

• Use transition on --app-sidebar-offset
• Position Close button relative to the sidebar
• Slide with margin instead of max-width
• Test on mobile

🏁 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

[Antreesy]

Wouldn't transform: translate be more appropriate here to use for animation?

[ShGKme]

Wouldn't transform: translate be more appropriate here to use for animation?

No, it would keep a large empty place when the sidebar is closing and then immediately resize page content.

An alternative could be to use absolute position together with translate, so sidebar would open on top of page content without an empty space. However, it would also make content resize immediately.

So I used the same approach as we are using now on NcAppNavigation. We could go with an alternative solution if there are performance issues.

[ShGKme]

@Antreesy see also gifs here: #5389 (review)

[susnux]

fancy!

[ShGKme]

Doesn't work in Firefox, except nightly build. But when it doesn't work, it's just a little more jumping

[susnux]

Looks smooth when testing

[ShGKme]

Rebased onto master, re-checked, no changes, ready to review

[ShGKme]

Snapshots should be updated. Previously they had no close button because it has absolute position without relative on .app-sidebar. It worked on the web-page, but not on cypress render.

I'll upload new snapshots when I have a stable internet connection.

[ShGKme]

/backport to next

[marcoambrosini]

It worked for me in files, but now testing in talk it seems that the sidebar does not close anymore @ShGKme

Screen.Recording.2024-05-20.at.12.27.39.mov