From a5416d1233dee63e5294bc9d37b45c29081c13fa Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Thu, 13 Apr 2023 23:19:35 +0100
Subject: [PATCH] Navbar now handles loggedin user
---
.../src/components/navigation/NavBar.tsx | 23 +++++++++++++++----
1 file changed, 18 insertions(+), 5 deletions(-)
diff --git a/daily-thought-frontend/src/components/navigation/NavBar.tsx b/daily-thought-frontend/src/components/navigation/NavBar.tsx
index 452b85c3..88b34623 100644
--- a/daily-thought-frontend/src/components/navigation/NavBar.tsx
+++ b/daily-thought-frontend/src/components/navigation/NavBar.tsx
@@ -15,7 +15,6 @@ const navigation = [
]
const userNavigation = [
{ name: 'Your Profile', href: '#' },
- { name: 'Settings', href: '#' },
{ name: 'Sign out', href: '#' },
]
@@ -83,7 +82,14 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
<div>
<Menu.Button className="flex max-w-xs items-center rounded-full bg-green-400 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink">
<span className="sr-only">Open user menu</span>
- <img className="h-8 w-8 rounded-full" src={user.Avatar} alt="" />
+ {user.profile.length > 0 &&
+ <img className="h-8 w-8 rounded-full" src={user.profile} alt="" />
+ }
+
+ {user.profile.length === 0 &&
+ <p className='text text-white h-8 w-8 rounded-full flex justify-center items-center'>{user.username[0]}</p>
+ }
+
</Menu.Button>
</div>
<Transition
@@ -154,11 +160,18 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
<div className=" pt-4 pb-3 bg-c-pink ">
<div className="flex items-center px-5 bg-white mx-2 py-2 rounded-md">
<div className="flex-shrink-0">
- <img className="h-10 w-10 rounded-full" src={user?.Avatar} alt="" />
+ {user && user.profile.length > 0 &&
+ <img className="h-10 w-10 rounded-full" src={user?.profile} alt="" />
+ }
+
+ {user && user.profile.length === 0 &&
+ <p className='h-10 w-10 rounded-full bg-c-green text-white flex items-center justify-center'>{user.username[0]}</p>
+ }
+
</div>
<div className="ml-3">
- <div className="text-base font-medium leading-none text-grey-600">{user?.Name}</div>
- <div className="text-sm font-medium leading-none text-gray-400">{`@${user?.Username}`}</div>
+ <div className="text-base font-medium leading-none text-grey-600">{user?.name}</div>
+ <div className="text-sm font-medium leading-none text-gray-400">{`@${user?.username}`}</div>
</div>
<button
type="button"
--
GitLab