Development » Algonyx

PR Description: Enhance Navigation and User Experience with Responsive Layouts and Role-Based Menus
Overview
This PR introduces several UI/UX improvements to the navigation components, focusing on responsive design, user authentication states, and role-based menu options. Key changes include updating breakpoints for better mobile/desktop handling, adding a user avatar dropdown for authenticated users, implementing dynamic menu options based on user roles, and optimizing image loading with size attributes.

Changes Made
Responsive Layout Updates:

• Adjusted navbar breakpoints from md to lg for elements like hamburger menu, navigation links, and buttons to improve desktop visibility.
• Updated SectionContainer max-width to 1360px for better layout consistency.
• Enhanced ReadySection with responsive profile cards, background images, and gradient overlays for a more dynamic hero section.

User Authentication and Avatar:

• Added UserAvatar component with a dropdown menu for logged-in users, displaying user name and profile image.
• Integrated role-based options in the avatar dropdown (e.g., Client, Talent, Vendor, Consultant menus).
• Updated sign-in button styling to use a bordered design with blue theme.

Role-Based Navigation:

• Refactored ClientOptions to dynamically render menu items based on user role (Client, Talent, Vendor, Consultant).
• Added logout functionality with redirect to home page.
• Updated hamburger menu to show NoAuthDrawer for unauthenticated users and ClientOptions for authenticated ones.

Performance and UI Optimizations:

• Added sizes attributes to Image components in AuthLogo, FooterTop, and ReadySection for better responsive image loading.
• Introduced new SVG icons for client options (e.g., find-talent, shortlists, contracts).
• Fixed z-index issues in navbar for proper layering.

Code and Context Updates:

• Modified auth context to use activeRole instead of role for user info.
• Added role constants in roles.ts for better maintainability.
• Cleaned up unused code and improved component props (e.g., added className support).

How to Test
To verify these changes, follow these steps in the browser UI:

Responsive Layout Testing:

• Open the app in a browser and resize the window or use developer tools to simulate different screen sizes.
• Desktop (≥1440px): Confirm the navbar shows "Hire Talent", "Register as Vendor", and "Sign In" buttons. Navigation links should be visible.
• Tablet/Mobile (<1440px): Hamburger menu should appear, hiding the desktop buttons. Click the hamburger to open the sidebar.
• Check the "Ready for a career upgrade?" section: Profile cards should resize responsively (larger on desktop), and the background image should adjust.

Authentication State Testing:
Unauthenticated User:

• Visit the homepage or any public page.
• Hamburger menu should display the "No Auth Drawer" with "Register as Vendor" and "Sign In" options.
• Navbar should show "Hire Talent", "Register as Vendor", and "Sign In" on desktop.

Authenticated User:

• Log in with a test account (ensure roles are set: Client, Talent, Vendor, or Consultant).
• Navbar should display the user avatar (with name "Harsh" and profile image) instead of sign-in buttons.
• Click the avatar (on desktop ≥1440px) to open the dropdown menu.
• Verify menu options match the user's role:
• Client: Find Talent, Shortlists, Contracts, Help Center, Settings, Switch to Vendor.
• Talent: My Profile, Settings.
• Vendor: My Profile, Resource Management, Settings, Switch to Client.
• Consultant: My Profile, Settings.
• Click "Sign Out" to log out and redirect to home.

Hamburger Menu Testing:

• On mobile/tablet, open the hamburger menu.
• For unauthenticated: Should show "No Auth Drawer".
• For authenticated: Should show role-based options in ClientOptions.
• Test logout from hamburger: Click "Sign Out" and confirm redirect.

Image and Performance:

• Inspect network tab: Confirm images (e.g., in footer, auth logo, ready section) load with appropriate sizes.
• Check console for any errors related to image loading or auth context.

Edge Cases:

• Test with different roles by switching user accounts.
• Verify dropdown closes on outside click (avatar dropdown).
• Check on various browsers (Chrome, Firefox, Safari) and devices.