Feat: auto drop down option when hover over the user profile icon

[suryaprakash0010]

🚀 Is your feature request related to a problem?

• Problem:
  Currently, users must explicitly click on the user profile icon to view account-related actions such as Log in, Sign up, Become a Host, and Help. This interaction adds friction and feels slightly outdated for desktop users who expect instant visual feedback on hover, especially in top navigation menus.

---

💡 Proposed Solution

• Solution:
  Introduce an auto dropdown menu on hover over the user profile icon in the top-right navigation bar.

  Expected Behavior:

  • When the user hovers over the profile icon:

    • A dropdown menu appears automatically

    • The menu displays:

      • Log in
      • Sign up
      • Become a Host
      • Help

  • The dropdown closes smoothly when the cursor leaves the menu or icon area

  • Maintain the same visual design (rounded corners, spacing, shadow) as shown in the attached UI

• Technical Notes (optional):

  • Frontend-only change

  • Can be implemented using:

    • CSS hover (:hover, opacity, visibility, transform)
    • OR React handlers (onMouseEnter, onMouseLeave)

  • Should include:

    • Hover delay to prevent flicker
    • Keyboard accessibility (tab, focus, aria-expanded)
    • Click-based fallback for mobile devices

---

🔍 Alternatives Considered

1. Alternative A: Click-only dropdown

   • Slower interaction
   • Less intuitive for desktop users
   • Requires additional user action for common navigation

2. Alternative B: Persistent menu items in navbar

   • Increases navbar clutter
   • Reduces available space for primary actions
   • Not scalable for smaller screens

---

📐 Mockups & Examples

• Attach screenshot (current UI shown above)

• Add hover-state mockup (optional)

• Similar implementations:

  • Airbnb web navbar
  • GitHub profile dropdown
  • LinkedIn profile menu

---

🧩 Potential Impact

• Target Users:

  • Guest users
  • New users
  • Desktop-first users

• Value:

  • Faster access to authentication and help options
  • Cleaner and more responsive UI
  • Improved first-time user experience
  • Reduced clicks for frequent actions

---

🌱 Additional Context

• Related Features: #navbar #profile-dropdown #ui-enhancement

• Technical Constraints:

  • Must preserve tap interaction on mobile
  • Dropdown should not overflow viewport on smaller screens
  • Z-index must stay above hero/banner images

[Atharvverma1234]

Hello Sir,
I would like to work upon this issue under SWoC26.
Please assign it to me.
Thank you.

[hitesh-kumar123]

@Atharvverma1234 assign to you