From 1b277f6d3c04ab9be300acb4696ec9884978e98e Mon Sep 17 00:00:00 2001
From: Berlem <belen@ivars.me>
Date: Sun, 21 Apr 2024 23:31:04 +0200
Subject: [PATCH] create menu profile #407

---
 .../app/src/components/TopProfileImage.jsx    | 29 +++++++++++++++----
 .../project/app/src/pages/Home.jsx            |  5 ++--
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/staff/belen-ivars/project/app/src/components/TopProfileImage.jsx b/staff/belen-ivars/project/app/src/components/TopProfileImage.jsx
index c0005f3e3..dcb19133f 100644
--- a/staff/belen-ivars/project/app/src/components/TopProfileImage.jsx
+++ b/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>
 }
 
diff --git a/staff/belen-ivars/project/app/src/pages/Home.jsx b/staff/belen-ivars/project/app/src/pages/Home.jsx
index bfe690be4..c461abbd4 100644
--- a/staff/belen-ivars/project/app/src/pages/Home.jsx
+++ b/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>