From e66c36ecde3dec9d4465ec72a15caa00dbb4dfd3 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Fri, 25 Aug 2023 00:13:26 +0800
Subject: [PATCH] Avatar dropdown display login/logout based on user state

---
 components/navbar.tsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/components/navbar.tsx b/components/navbar.tsx
index ea659ac..8a06258 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -47,6 +47,10 @@ export const Navbar = ({ user }: { user: User | null }) => {
 		router.refresh()
 	}
 
+	const login = () => {
+		router.push('/login')
+	}
+
 	return (
 		<NextUINavbar
 			maxWidth='xl'
@@ -124,12 +128,22 @@ export const Navbar = ({ user }: { user: User | null }) => {
 										{user ? user.email : 'Guest'}
 									</p>
 								</DropdownItem>
-								<DropdownItem
-									key='logout'
-									color='danger'
-									onPress={() => logout()}>
-									Log Out
-								</DropdownItem>
+								{user ? (
+									<DropdownItem
+										key='logout'
+										color='danger'
+										className='text-danger'
+										onPress={() => logout()}>
+										Log Out
+									</DropdownItem>
+								) : (
+									<DropdownItem
+										key='login'
+										color='primary'
+										onPress={() => login()}>
+										Login
+									</DropdownItem>
+								)}
 							</DropdownMenu>
 						</Dropdown>
 					</div>