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;
+`;