Implement fading in and out on the modal and sidebar

[kuv2707]

Description

The elements should fade in instead of appearing abruptly. The same goes for when it is hidden - it should fade out.

We'd want to implement it completely using CSS (preferably tailwind). A duration of 300ms seems fine. Currently, when the sidebar is closed, the component is unmounted altogether, which would make the fade out animation difficult. We can just set display:none on it, instead of not rendering it when closed.

[issue-assigner[bot]]

Comment '@csoc-bot claim' to get this issue assigned or '@csoc-bot abandon' to get this issue unassigned.

[kuv2707]

This issue is suitable for newcomers

[Lavina-11]

@csoc-bot claim

[issue-assigner[bot]]

@Lavina-11 This issue has been successfully assigned to you! 🚀

[Spikoftw]

@csoc-bot claim

[issue-assigner[bot]]

@Spikoftw Sorry, maximum limit for assignees in this issue has reached. Please check other issues or contact a maintainer.

[realnilesh]

@csoc-bot claim

[issue-assigner[bot]]

@realnilesh Sorry, maximum limit for assignees in this issue has reached. Please check other issues or contact a maintainer.

[Lavina-11]

@csoc-bot abandon

[issue-assigner[bot]]

@Lavina-11 You have been unassigned to this issue successfully.

[AB000001]

@csoc-bot claim

[issue-assigner[bot]]

@AB000001 This issue has been successfully assigned to you! 🚀

[kuv2707]

@AB000001 What's the status?

[AB000001]

I am able to implement the fade in while opening. But fad out while closing is not happening

[kuv2707]

I think its likely due to the fact that we are not rendering the component when we close it. We should instead render it even then and make it invisible with css (decided by the state variable).

You can make a PR with the existing progress. Also, it is totally fine to feel stuck, you can engage in discussions with the maintainers for the same.

[AB000001]

Sure Thanks. let me try

[kuv2707]

@AB000001 You should reach out if you're stuck somewhere

[kuv2707]

@AB000001 Unassigning due to inactivity.

[sksmagr23]

@csoc-bot claim

[issue-assigner[bot]]

@sksmagr23 This issue has been successfully assigned to you! 🚀