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.