added checks for onboarding status

components/Header/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import CONFIG from '@/lib/configs';
+import { useProfile } from '@/utils/ProfileProvider';
 import Icon from '../Icon';
 import { Container, HamburgerButton } from './styles';
 
@@ -11,6 +13,7 @@ interface HeaderProps {
 
 export default function Header({ toggleNavColumn, isLoggedIn }: HeaderProps) {
   const currentPath = usePathname();
+  const { profileReady } = useProfile();
 
   const onNavColumnClick = () => {
     toggleNavColumn();
@@ -28,11 +31,17 @@ export default function Header({ toggleNavColumn, isLoggedIn }: HeaderProps) {
       <Link href="/">
         <Icon type="logo" />
       </Link>
-      {/* still need to check if onboarding completed or not, after ProfileContext merged*/}
       {isLoggedIn ? (
-        <Icon type="profile" />
+        profileReady ? (
+          // display profile icon if user is logged in and onboarded
+          <Icon type="profile" />
+        ) : (
+          // display onboarding link if user is logged in but not onboarded
+          <Link href={CONFIG.onboarding}>Complete Onboarding</Link>
+        )
       ) : (
-        <Link href="/login">Login/Sign Up</Link>
+        // display login link if user is not logged in
+        <Link href={CONFIG.login}>Login/Sign Up</Link>
       )}
     </Container>
   );