Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FRONTEND: Implement User Profile Dropdown in Navbar #273

Closed
BigBen-7 opened this issue Mar 5, 2025 · 16 comments · Fixed by #279
Closed

FRONTEND: Implement User Profile Dropdown in Navbar #273

BigBen-7 opened this issue Mar 5, 2025 · 16 comments · Fixed by #279
Assignees

Comments

@BigBen-7
Copy link
Collaborator

BigBen-7 commented Mar 5, 2025

Description

We need to update our current navbar (Image below) to include a user profile dropdown
Image

similar to the one shown below. figma

Image

The current settings page is a modal, but we want to convert it into a standalone page. Disable the modal and update the settings, stats, and view profile options to route to their respective pages instead. These pages are already built—just link them accordingly.

The dropdown should appear when the user clicks on their profile icon and include:

  • Profile Section: Displays user profile picture, name, and email.
  • Buttons & Links:
    • "View Profile" button
    • "Settings"
    • "Status"
    • "Notifications"
    • "Log Out"

Tasks

  1. Update Navbar: Replace the existing navbar with the new one.
  2. Create Dropdown Component: Ensure it appears when the user clicks their profile and disappears when clicked outside.
  3. Implement Routing: Clicking on "View Profile" and other options should navigate users to their respective pages.
  4. Ensure Responsiveness: The dropdown should work well across all screen sizes.

Expected Outcome

The navbar should be updated with a fully functional dropdown that enhances user experience and provides quick access to account-related features.

@Agbeleshe
Copy link
Contributor

Agbeleshe commented Mar 5, 2025

About Me:
I am a full-stack developer with over three years of experience, specializing in building scalable and responsive applications using React, Next.js, and Tailwind CSS.

Plan to Address the Issue:
I will disable the existing modal-based settings page and update the routing to direct users to the already-built standalone pages. I will implement a dropdown component that appears when users click on their profile icon and disappears when clicked outside. The dropdown will include the required profile details and navigation buttons. Finally, I will ensure full responsiveness across all screen sizes.

ETA: 24 hours.
Unlock the letters

@Luluameh
Copy link
Contributor

Luluameh commented Mar 5, 2025

Can I handle this?
ETA:8hrs

@Verifieddanny
Copy link
Contributor

Verifieddanny commented Mar 5, 2025

I'd love to "Unlock the letters!", work on this and get it done in 12 hours

@Marvelousmicheal
Copy link

hello ser,
i have been trying to contribute to this project, and i think this issue would be a very goood opportunity for me to start contributing to the project.
i would build the navigation bar and complete the task required

@Marvelousmicheal
Copy link

hey ser, i have been trying to contribute to this project for a while now,
and i think this would be a really good issues ffor me to start contributing to this project, i would build the modal for the dropdown exactly the way it isin the design, while adding the functionality and i would also like to Unlock the Letters

@CMI-James
Copy link

Hey, I’m Michael. With my experience in React, Next.js, and Tailwind CSS, I’d love to take on this task. I’ll ensure the navbar update includes a fully functional, responsive profile dropdown with smooth interactions, proper routing, and an improved user experience.

ETA: 8 hours.

@3th-Enjay
Copy link

Unlock the letters , can I handle this task 4hrs eta

@Elite-tch
Copy link
Contributor

Can I take this from here? 'Unlock the Letters'
ETA 12hrs
telegram elite-tch

@gregemax
Copy link

gregemax commented Mar 6, 2025

I’m excited to apply for the navbar update task. With my experience in frontend development and UI/UX best practices, I can efficiently implement the required changes while ensuring a seamless user experience.

Approach to Implementation:
Update Navbar: Replace the existing navbar with the new design and add a profile dropdown.
Dropdown Component: Create an interactive dropdown that appears on click and disappears when clicked outside.
Navigation & Routing: Link "View Profile," "Settings," "Status," and "Notifications" to their respective pages and disable the existing modal.
Responsiveness & Accessibility: Ensure the dropdown functions well across all screen sizes with smooth animations and keyboard accessibility.
Testing & Quality Assurance: Verify UI consistency, navigation, and responsiveness.

ETA : 5h

@johnsmccain
Copy link

Could I take a shot at this?

@B-uchi
Copy link

B-uchi commented Mar 6, 2025

I’d like to handle this.

@Jayking40
Copy link

I’d love to work on this task.

@simplicityf
Copy link

I'd be happy to do this. As an experience FE dev, all your requirements will be met.

ETA 1hr,
TG: Omobolanle

@ussyalfaks
Copy link

I'd love to contribute!

Tasks:
✅ Update Navbar

Replace the existing navbar with the new design that includes a user profile dropdown.
✅ Create Dropdown Component

Ensure the dropdown appears when clicking the profile icon and disappears when clicked outside.
Display user profile picture, name, and email.
✅ Implement Routing

Link "View Profile," "Settings," "Status," and "Notifications" to their respective pages.
Disable the modal and ensure "Settings" opens as a standalone page.
✅ Ensure Responsiveness

The dropdown should work smoothly across all screen sizes.
I’ll ensure a seamless user experience with intuitive navigation and responsive design.

@BigBen-7
Copy link
Collaborator Author

BigBen-7 commented Mar 8, 2025

I'd love to "Unlock the letters!", work on this and get it done in 12 hours

@Verifieddanny it has been two days, what is the update?
failure to create a PR within the next 12hours will see you unassigned!

@Verifieddanny Verifieddanny mentioned this issue Mar 8, 2025
17 tasks
@Verifieddanny
Copy link
Contributor

I'm just seeing that I was assigned @BigBen-7 , I've raised a PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.