Animate the Sidebar Objects Tree view opening

[AliElamir]

@Bonapara

Issue #6485

Introduced the animation when opening the menu.

Please let me know if this is fine or I need to make further changes. Thank you.

[greptile-apps]

PR Summary

Introduced animations for the sidebar objects tree view opening and closing using framer-motion to enhance user experience.

• Modified packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx to include animation variants.
• Applied motion.div with hidden and visible states for smooth transitions.
• Set animation duration to 300ms as specified in the related issue.
• Ensured no interference with existing functionality and handled edge cases.

_{1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[bosiraphael]

Hello @AliElamir, thank you for contributing.
The animation is not exactly what @Bonapara described in his issue.
When you display your animation slowly, you can see that the children appear instantly and then the parent element height is animated, I feel like you should also animate the height of the children elements to make it feel smoother.

Enregistrement.de.l.ecran.2024-08-05.a.17.06.03.mov

More insights:

• the animation should also be displayed when we close the menu
• the opacity also seems to be animated from 0 to 1

Thank you :)

[AliElamir]

Hey @bosiraphael , thank you for your feedback.

I have adjusted the animation based on your comments and pushed the latest changes. It looks right to me now, but please let me know if there are any more adjustments needed. @Bonapara

Thank you!

[bosiraphael]

LGTM, I made a few modifications to make the animation smoother. Thank you for contributing :)