create menu profile b00tc4mp#407

staff/belen-ivars/project/app/src/components/TopProfileImage.jsx

@@ -1,18 +1,35 @@
 import Gravatar from 'react-gravatar'
-import { Link } from '../library'
+import { Button } from '../library'
 import { useNavigate } from 'react-router-dom'
+import { useState } from 'react'
+import FavsButton from './FavsButton'
+import LogoutButton from './LogoutButton'
 
 export default function TopProfileImage({ name, email }) {
 
+	const [view, setView] = useState(null)
+	const [isOpen, setIsOpen] = useState(false)
+	const navigate = useNavigate()
+
+
 	function handleProfileClick(event) {
 		event.preventDefault()
-		const navigate = useNavigate()
-		navigate('/profile')
+
+		setIsOpen(!isOpen)
+
+		if (isOpen) {
+			setIsOpen(false)
+		}
 	}
 
-	return <Link className="link-profile" onClick={handleProfileClick}>
+	return <Button className="link-profile" onClick={handleProfileClick}>
 		<Gravatar email={email} /> {name}
-	</Link>
-
+		{isOpen && (
+			<div>
+				<FavsButton />
+				<LogoutButton />
+			</div>
+		)}
+	</Button>
 }
 

staff/belen-ivars/project/app/src/pages/Home.jsx

@@ -4,10 +4,9 @@ import { Routes, Route, useNavigate, useLocation } from 'react-router-dom'
 import logic from "../logic"
 import { Button, Link, Container } from "../library"
 import Profile from './Profile'
-import FullHeader from "../components/FullHeader"
 import Context from "../Context"
 import NewRecipe from "../components/NewRecipeForm"
-import { Recipes } from "../components"
+import { Recipes, TopProfileImage } from "../components"
 import Search from "../components/Search"
 
 
@@ -86,7 +85,7 @@ function Home(props) {
 		<header className="header">
 			<h1><Link className="link-header" onClick={handleHomeClick}>Basic Pantry</Link></h1>
 
-			<FullHeader email={email} name={name} />
+			<TopProfileImage email={email} name={name} />
 
 		</header>