fix: Make user profile card clickable and navigate to profile page (#259)

[DheerajShrivastav]

Issue

Fixes #259 - User profile card in sidebar was not interactive/clickable

Changes Made

1. Created Protected Profile Page

• New component at /src/pages/Dashboard/Profile.jsx
• Displays: Avatar (photoURL or initials), Full Name, Email, Auth Provider, Member Since date
• Fully responsive with dark/light theme support

2. Made Profile Card Interactive

• Updated DashboardLayout.jsx - Profile card is now a clickable button
• Updated CoinWrapper.jsx - Profile card is now a clickable button
• Navigation to /profile on click
• Added visual affordances:
  • Cursor pointer on hover
  • Hover background color change
  • Focus ring for keyboard accessibility

3. Added Protected Route

• Registered /profile route in App.jsx
• Route only accessible when authenticated (protected by PrivateRoute)
• Profile page renders without main navbar/footer (dashboard mode)

4. Bug Fixes

• Fixed Navbar JSX structure - corrected malformed dropdown rendering
• Fixed event handler references in Navbar.jsx:
  • handleClickOutside using wrong parameter name
  • handleEscape reference updated to handleEscapeKey

Testing

• ✅ Profile card clickable on Dashboard
• ✅ Profile card clickable on Market Overview
• ✅ Navigation to /profile works
• ✅ Profile page displays all user details
• ✅ Works on desktop and mobile
• ✅ Keyboard accessible (focus states)
• ✅ Dark/Light theme support

Files Changed

• src/pages/Dashboard/Profile.jsx (new)
• src/App.jsx
• src/pages/Dashboard/DashboardLayout.jsx
• src/pages/Home/Coin/CoinWrapper.jsx
• src/components/Navbar.jsx

[vercel]

@DheerajShrivastav is attempting to deploy a commit to the Karan Manickam's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🎉 Thanks for the PR, @DheerajShrivastav!

We really appreciate you taking the time to contribute to CryptoHub! 💙

---

⭐ Love this project?

Please give us a star! It helps the project grow and reach more developers! 🌟

🔗 https://github.com/KaranUnique/CryptoHub---

✅ PR Checklist

Before we review, please ensure:

• Your code follows the project's coding standards
• All file changes are accurate and intentional
• You've tested your changes locally
• Any review comments have been addressed

---

We'll review your PR as soon as possible. Keep up the great work! ✨