Enhancement: Enhance Dropdown Functionality and Styling using Animations

[CoderFleet]

Enhance Dropdown Functionality and Styling

Description

This pull request addresses several improvements to the dropdown component to enhance its functionality, aesthetics, and maintainability.
[ Fixes #19 ]

Changes Made

1. Fixed Dropdown Behavior

   • Resolved an issue where the dropdown menu would remain open after selecting an item. Now, the dropdown closes automatically upon clicking an item.

2. Stylized Dropdown

   • Updated the dropdown's styling for a more modern and visually appealing appearance. Changes include:
     • Updated colors and hover effects.

3. Added Animations Using Framer Motion

   • Implemented smooth enter and exit animations for the dropdown menu, providing a better user experience. Animations include:
     • A fade-in effect when the dropdown appears.
     • A fade-out effect when the dropdown disappears.

4. Refactored Code

   • Cleaned up and optimized code for better readability and maintainability.
   • Consolidated redundant logic into reusable functions.

Technical Details

• Framework/Libraries: Used framer-motion for animations.
• Code Refactor: Improved readability and modularity by adhering to coding best practices.

Screenshots

Before:

screen-capture.3.webm

After:

screen-capture.2.webm

Linked Issues

Fixes: #19

Checklist

• Fixed dropdown behavior.
• Updated styling.
• Added animations.
• Refactored code.

[netlify]

✅ Deploy Preview for computercodingtest ready!

Name	Link
🔨 Latest commit	a8cb6cd
🔍 Latest deploy log	https://app.netlify.com/sites/computercodingtest/deploys/677f8c952a384400084c9fd8
😎 Deploy Preview	https://deploy-preview-63--computercodingtest.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[MrinalVarshney]

@CoderFleet
The leaderboard and education sections are missing in the mobile view. While these sections are implemented correctly for large screens, please ensure they are also included and styled appropriately for smaller screens (mobile view).

Let me know if you need specific guidance or design references for this!

[dwargosama]

@CoderFleet The leaderboard and education sections are missing in the mobile view. While these sections are implemented correctly for large screens, please ensure they are also included and styled appropriately for smaller screens (mobile view).

Let me know if you need specific guidance or design references for this!

@MrinalVarshney , PR-57 is solving that issue. Their codes can be merged together. Please verify rest.

@CoderFleet Please create PR for branch 'version-1.2' and not 'main'.

[CoderFleet]

@adityarai0705 Done Sir👍

[CoderFleet]

Closing this PR since, this one is redundant now as #69 got merged in required branch