dev #3578
Updated by Nazmul Hossain Shovon 5 months ago
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.