Frontend: Implemented fading in & out effect on opening and closing of sidebar and modal objects

[sksmagr23]

Description

Added tailwind transition and transform properties with state change of sidebar and modal, giving fading effect on opening and closing.

fixes #131

How to Test

• Run "npm run dev"

Related Issues

• Implement fading in and out on the modal and sidebar #131

Checklist

• I have tested these changes locally.
• I have reviewed the code and ensured it follows the project's coding guidelines.
• I have updated the documentation, if necessary.
• I have assigned reviewers to this pull request.

Screenshots

Screencast.from.2024-06-30.10-46-17.webm

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
multiplayer-uno	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 30, 2024 4:37pm

[kuv2707]

Left an implementation suggestion

[sksmagr23]

Implemented the required change

[kuv2707]

While the sidebar enters from the right, the shadow remains in place which seems kinda awkward.

We can transition the width from "w-0" to "w-64" instead of transform, and add a class to the buttons which makes them appear after the sidebar is completely in.

Suggested change

So line 199 can be:

<div
        className={`bg-gray-300 text-black border-gray-600 
${sidebarOpen?"w-64":"w-0"} p-4 shadow-lg 
pl-10 rounded-r-lg relative z-30 transform transition-width duration-500 `}

The class on buttons is required since after applying the above change, during animation the buttons overflow from the sidebar div (which is expanding due to animation)

After applying the above mentioned change:

• The buttons need to be taken care of (using CSS classes)
• Replace box shadow with drop shadow so that the rounded edge also has,a shadow.

[kuv2707]

We should try removing the setTimeout from the modal too, and change the classes as per state variables to allow fade-in animations on them, but let's leave that for sometime later.

[sksmagr23]

Added the suggested change, and tried to styled the buttons to match with animation of sidebar to avoid overflowing, looks better now
Screencast from 2024-06-30 22-06-42.webm

[kuv2707]

While there can still be minor amendments, I think this works

[kuv2707]

Merged, thanks @sksmagr23