Extract user avatar in navbar into its own component

components/navbar.tsx

@@ -40,23 +40,11 @@ export const Navbar = ({
 	categories: BookmarkCategory[]
 }) => {
 	const pathname = usePathname()
-	const router = useRouter()
 
 	if (pathname.startsWith('/login') || pathname.startsWith('/signup')) {
 		return <></>
 	}
 
-	const logout = async () => {
-		const response = await fetch('/api/auth/logout', {
-			method: 'POST',
-		})
-		router.refresh()
-	}
-
-	const login = () => {
-		router.push('/login')
-	}
-
 	return (
 		<NextUINavbar
 			maxWidth='xl'
@@ -113,6 +101,51 @@ export const Navbar = ({
 					</Link>
 					<ThemeSwitch className='hidden min-[330px]:flex' />
 					<div className='ml-2 flex items-center gap-4 min-[330px]:ml-4'>
+						<UserAvatar user={user} />
+					</div>
+				</NavbarItem>
+			</NavbarContent>
+
+			<NavbarMenu>
+				<div className='mx-4 mt-2 flex flex-col gap-2'>
+					{siteConfig.navMenuItems.map((item, index) => (
+						<NavbarMenuItem key={`${item}-${index}`}>
+							<Link
+								color={
+									index === 2
+										? 'primary'
+										: index ===
+										  siteConfig.navMenuItems.length - 1
+										? 'danger'
+										: 'foreground'
+								}
+								href='#'
+								size='lg'>
+								{item.label}
+							</Link>
+						</NavbarMenuItem>
+					))}
+				</div>
+			</NavbarMenu>
+		</NextUINavbar>
+	)
+}
+
+function UserAvatar({ user }: { user: User | null }) {
+	const router = useRouter()
+
+	const logout = async () => {
+		const response = await fetch('/api/auth/logout', {
+			method: 'POST',
+		})
+		router.refresh()
+	}
+
+	const login = () => {
+		router.push('/login')
+	}
+
+	return (
 		<Dropdown placement='bottom-end'>
 			<DropdownTrigger>
 				<Avatar
@@ -128,9 +161,7 @@ export const Navbar = ({
 				<DropdownItem
 					key='profile'
 					className='h-14 gap-2'>
-									<p className='font-semibold'>
-										Signed in as
-									</p>
+					<p className='font-semibold'>Signed in as</p>
 					<p className='font-semibold text-primary'>
 						{user ? user.email : 'Guest'}
 					</p>
@@ -153,31 +184,5 @@ export const Navbar = ({
 				)}
 			</DropdownMenu>
 		</Dropdown>
-					</div>
-				</NavbarItem>
-			</NavbarContent>
-
-			<NavbarMenu>
-				<div className='mx-4 mt-2 flex flex-col gap-2'>
-					{siteConfig.navMenuItems.map((item, index) => (
-						<NavbarMenuItem key={`${item}-${index}`}>
-							<Link
-								color={
-									index === 2
-										? 'primary'
-										: index ===
-										  siteConfig.navMenuItems.length - 1
-										? 'danger'
-										: 'foreground'
-								}
-								href='#'
-								size='lg'>
-								{item.label}
-							</Link>
-						</NavbarMenuItem>
-					))}
-				</div>
-			</NavbarMenu>
-		</NextUINavbar>
 	)
 }