From fbe3c240bd8a8a4668b2a71ecacee7167dc3a47c Mon Sep 17 00:00:00 2001 From: Tojo <fabricetojo29@gmail.com> Date: Mon, 7 Nov 2022 13:33:49 +0300 Subject: [PATCH] add profil on header --- src/components/core/Header.tsx | 6 +++++- src/components/core/Profil.tsx | 37 ++++++++++++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 src/components/core/Profil.tsx diff --git a/src/components/core/Header.tsx b/src/components/core/Header.tsx index 3474f2e..0765913 100644 --- a/src/components/core/Header.tsx +++ b/src/components/core/Header.tsx @@ -3,6 +3,7 @@ import Logo from "./Logo"; import Menu from "./Menu"; import logoSig from "../../images/logo-egeo.png"; import MenuMobile from "./menuMobile"; +import Profil from "./Profil"; const Header = () => { return ( @@ -26,7 +27,9 @@ const Header = () => { /> </svg> </label> + {/* ---------------MENU MOBILE------------------ */} <MenuMobile /> + {/* ---------------END MENU MOBILE------------------ */} </div> {/*----------------- LOGO --------------------------*/} <div className="flex-shrink-0 flex items-center"> @@ -38,6 +41,7 @@ const Header = () => { <div className="navbar-center hidden lg:flex"> <Menu /> </div> + {/* ---------------END MENU------------------ */} <div className="navbar-end"> <div className="form-control hidden sm:block"> <input @@ -47,7 +51,7 @@ const Header = () => { /> </div> {/* ---------------PROFIL------------------ */} - {/* <Profil /> */} + <Profil /> {/* ---------------END PROFIL------------------ */} </div> </div> diff --git a/src/components/core/Profil.tsx b/src/components/core/Profil.tsx new file mode 100644 index 0000000..9b11177 --- /dev/null +++ b/src/components/core/Profil.tsx @@ -0,0 +1,37 @@ +import React from "react"; + +interface Props { + imgProfile?: string +} + +const Profil = (props: Props) => { + const {imgProfile="https://placeimg.com/80/80/people"} = props + return ( + <div className="dropdown dropdown-end"> + <label tabIndex={0} className="btn btn-ghost btn-circle avatar"> + <div className="w-10 rounded-full"> + <img src={imgProfile}/> + </div> + </label> + <ul + tabIndex={0} + className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52" + > + <li> + <a className="justify-between"> + Profile + <span className="badge">Actualité</span> + </a> + </li> + <li> + <a>Paramètre</a> + </li> + <li> + <a>Déconnexion</a> + </li> + </ul> + </div> + ); +}; + +export default Profil; -- GitLab