Closed FaisalIbrahim404 closed 2 weeks ago
Create a component that displays the user's avatar and name once logged in.
The avatar component should display the user’s profile image.
When clicked, the profile component will reveal a dropdown, designed similarly to the reference provided in Figma: .
The dropdown should contain:
Suggested Name: UserProfileDropdown
.
Description:
We need a responsive navbar that adjusts its appearance on scroll and includes separate components for login/signup and profile actions. Below are the specifications and component structure.
Desktop View:
Mobile View:
Requirements:
1. Navbar Behavior:
2. Login/Signup Buttons Component:
AuthButtons
.4. Login State Logic:
AuthButtons
component.UserProfileDropdown
component.If the user is not logged in, this object will be
null
.5. Mobile View:
MobileSidebar
.Component Outline:
AuthButtons
- Handles login and signup buttons.UserProfileDropdown
- Manages the profile and dropdown logic (name, avatar, dropdown options).Navbar
- The main navbar component with all the scroll logic and responsiveness.NavLinks
- Manages the navigation links.MobileSidebar
- The sidebar component for mobile view.