diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 48cafa6..70f0850 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -13,7 +13,7 @@ interface HeaderProps { export default function Header({ toggleNavColumn, isLoggedIn }: HeaderProps) { const currentPath = usePathname(); - const { profileReady } = useProfile(); + const { profileReady, profileData } = useProfile(); const onNavColumnClick = () => { toggleNavColumn(); @@ -32,8 +32,9 @@ export default function Header({ toggleNavColumn, isLoggedIn }: HeaderProps) { {isLoggedIn ? ( - profileReady ? ( + profileReady && profileData !== null ? ( // display profile icon if user is logged in and onboarded + // this should route to /my-account in the future ) : ( // display onboarding link if user is logged in but not onboarded diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx index ea90da3..a67da6e 100644 --- a/components/NavColumn/index.tsx +++ b/components/NavColumn/index.tsx @@ -6,6 +6,7 @@ import { IconType } from '@/lib/icons'; import COLORS from '@/styles/colors'; import { H3, H4 } from '@/styles/text'; import { useAuth } from '@/utils/AuthProvider'; +import { useProfile } from '@/utils/ProfileProvider'; import Icon from '../Icon'; import NavColumnItem from '../NavColumnItem'; import { @@ -20,6 +21,7 @@ import { Overlay, Profile, ProfileDisplayContainer, + ProfileIcon, SignOutButton, SignUpButton, } from './styles'; @@ -53,6 +55,7 @@ export default function NavColumn({ const currentPath = usePathname(); const { signOut } = useAuth(); const router = useRouter(); + const { profileData } = useProfile(); const handleSignOut = () => { router.push(CONFIG.login); @@ -94,13 +97,13 @@ export default function NavColumn({ {isLoggedIn ? ( - +

- Name + Your Account

- Type of Garden + {profileData?.user_type}

diff --git a/components/NavColumn/styles.ts b/components/NavColumn/styles.ts index 53063fb..9d1b5cf 100644 --- a/components/NavColumn/styles.ts +++ b/components/NavColumn/styles.ts @@ -123,3 +123,8 @@ export const SignOutButton = styled.button` cursor: pointer; font-size: 0.875rem; `; + +export const ProfileIcon = styled(Icon)` + min-height: 40px; + min-width: 40px; +`;