Refactor Navbar and Dropdown components, clean up styles, and improve code consistency

[Praveen10]

Pull Request Template

Summary

Please include a summary of the changes and the related issue. Please also include relevant motivation and context. List any dependencies that are required for this change.

Description

This pull request introduces several UI enhancements to improve the user experience and maintain code consistency. Key updates include refactoring dropdown components for better reusability, cleaning up unused code, and improving styling for navigation elements.

Changes Made

NavBar Updates

File: NavBar.js

• Removed duplicate "Home" tab in .
• Adjusted alignment by changing left: 35vw to 55vw in const RightNav.
• Updated styles for NavLink
• Set text-decoration: none and adjusted the color for the active state.
• Removed the content: "☕" and replaced it with an empty string ("").
• Removed padding to improve the layout.

Dropdown Refactoring

File: Dropdown.js

• Refactored individual dropdown components into a reusable Dropdown component
• Simplified ProDropdown, OsDropdown, UsLoginDropdown, and UsLogoutDropdown by passing items as props to the new Dropdown component.
• The Dropdown component now handles toggle logic and renders dropdown items dynamically.

CSS Update

File: Dropdown.css

• Updated .product-submenu to improve the dropdown's styling
• Added smooth transition for visibility and opacity.
• Updated the background color, border, and padding for better UI consistency.
• Modified .submenu-item
• Added hover effects for improved interaction and user experience.
• Ensured proper padding and consistent sizing across items.

Overall Style Consistency

• Adjusted the dropdown menu position and transitions to improve the visual appearance and accessibility.
• Ensured the consistent use of styles across navigation components for a unified look and feel.

Fixes # (issue)

Type of Change

Please mark [X] for applicable items:

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Code refactoring
• Other (please describe):

Testing

Please describe the tests you performed to verify your changes:

• Manually tested dropdown functionality, ensuring all dropdown items appear and toggle correctly.
• Ensured that the refactored dropdown components work as expected without breaking any existing functionality.
• Confirmed that the overall navigation and interaction experience remained smooth after the code changes.

Screenshots/Videos

Please attach relevant screenshots or videos demonstrating the changes.

Checklist

Please mark [X] for completed items:

• My code follows the project's style guidelines
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have updated the documentation accordingly
• [] My changes generate no new warnings
• [] I have added tests that prove my fix is effective or that my feature works

Please let me know if any adjustments are required or if additional details need to be included.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
coffee-shop	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 13, 2025 2:19pm

[github-actions]

Thank you for your contribution! 🎉

PR Checklist

• Tests added/updated
• Documentation updated
• Changes follow coding standards
• Commit messages are clear

Next Steps

1. We will review your PR soon
2. Address any requested changes
3. Once approved, your PR will be merged

Need help? Check our Contributing Guide

Happy coding! 💻

[Mujtabaa07]

@Praveen10 Fix this issue

[Praveen10]

@Mujtabaa07 Merge conflict has been resolved. The changes have been tested, and the build has successfully completed. Please review the updated pull request

[Mujtabaa07]

@Praveen10 resolve this issue

[Mujtabaa07]

add your issue number

[Praveen10]

Thank you @Mujtabaa07 do you want me to create an issue (Bug) to resolve the merge conflict .?

[Praveen10]

@Mujtabaa07 Merge conflict has been resolved. The changes have been tested, and the build has successfully completed. Please review the updated pull request

[Mujtabaa07]

@Praveen10 its freeze , resolve the conflicts

[Praveen10]

@Mujtabaa07 The conflict is now resolved. Please review the updated pull request

[Mujtabaa07]

🎉 Congratulations on Your Merged PR!

Thank you @Praveen10 for your contribution!

What's Next?

• 🌟 Consider contributing to other issues
• 📚 Check our Contributing Guidelines for more ways to help

Keep up the fantastic work! 🚀

[Mujtabaa07]

@Praveen10 make sure you close this issue