Closed sksmagr23 closed 4 days ago
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 |
Implemented the required change
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.
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:
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.
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
While there can still be minor amendments, I think this works
Merged, thanks @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
Related Issues
131
Checklist
Screenshots
Screencast from 2024-06-30 10-46-17.webm