Create a Responsive Navbar

[FaisalIbrahim404]

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:

• On scroll, the navbar’s background should change from transparent to white.
• The padding should shrink slightly when scrolling.
• The navbar should be a standalone component that contains all logic, and should not accept any props.
• Responsiveness for mobile and desktop views will be handled within this component.

2. Login/Signup Buttons Component:

• Create a separate component for the login and signup buttons.
• Suggested Name: AuthButtons.

4. Login State Logic:

• For now, use local state to manage login status.
• If the user is not logged in, show the AuthButtons component.
• If the user is logged in, show the UserProfileDropdown component.
• The login state will be an object with the following structure:

   {
     userId: String,
     userName: String,
     userImage: String
   }

  If the user is not logged in, this object will be null.

• In future iterations, we will use the Zustand library to manage the login state globally.

5. Mobile View:

• For mobile, the navbar should transform into a sidebar, similar to the ActusGo project.
• The sidebar will be a separate component.
• Suggested Name: MobileSidebar.

---

Component Outline:

1. AuthButtons - Handles login and signup buttons.
2. UserProfileDropdown - Manages the profile and dropdown logic (name, avatar, dropdown options).
3. Navbar - The main navbar component with all the scroll logic and responsiveness.
4. NavLinks - Manages the navigation links.
5. MobileSidebar - The sidebar component for mobile view.

[Hamdysaad20]

this one will be in the application itself

3. Profile Component with Dropdown:

• 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:

  • Profile
  • Job History
  • Dark Mode Switch
  • Logout

• Suggested Name: UserProfileDropdown.