formatted profile menu
This commit was merged in pull request #1.
This commit is contained in:
victorAnumudu
@@ -13,12 +13,16 @@ import SearchCom from "../Helpers/SearchCom";
|
||||
import WalletHeader from "../MyWallet/WalletHeader";
|
||||
import usersService from "../../services/UsersService";
|
||||
|
||||
import siteLogo from '../../assets/images/wrenchboard.png'
|
||||
import Flag from '../../assets/images/united-states.svg'
|
||||
|
||||
|
||||
export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
const [balanceDropdown, setbalanceValue] = useToggle(false);
|
||||
const [notificationDropdown, setNotificationValue] = useToggle(false);
|
||||
const [userProfileDropdown, setProfileDropdown] = useToggle(false);
|
||||
const [moneyPopup, setPopup] = useToggle(false);
|
||||
const [toggleNotification, setToggleNotification] = useToggle(false)
|
||||
const darkMode = useContext(DarkModeContext);
|
||||
|
||||
const [myWalletList, setMyWalletList] = useState([]);
|
||||
@@ -79,6 +83,10 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
setPopup.toggle();
|
||||
setbalanceValue.set(false);
|
||||
};
|
||||
|
||||
const setNotification = ()=> {
|
||||
setToggleNotification.toggle()
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div className="header-wrapper backdrop-blur-sm bg-[#efedfe5e]/60 dark:bg-transparent w-full h-full flex items-center xl:px-0 md:px-10 px-5">
|
||||
@@ -470,18 +478,22 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`profile-dropdown w-[293px] z-30 bg-white dark:bg-dark-white absolute lg:right-16 -right-[16px] rounded-lg cursor-pointer ${
|
||||
className={`profile-dropdown w-[293px] z-30 bg-white dark:bg-dark-white absolute lg:right-16 -right-[16px] rounded-lg ${
|
||||
userProfileDropdown ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6">
|
||||
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||
My Profile
|
||||
</h3>
|
||||
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-2">
|
||||
<img src={siteLogo} alt="Logo" className="w-[150px]" />
|
||||
</div>
|
||||
<div className="content px-7">
|
||||
<ul>
|
||||
<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
|
||||
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-2">
|
||||
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||
Surname
|
||||
</h3>
|
||||
<p className="text-sm text-gray-400 dark:text-white hover:text-sky-blue cursor-pointer">broklinslam_75@gamil.com</p>
|
||||
</div>
|
||||
<div className="content">
|
||||
<ul className="px-7">
|
||||
{/* <li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
|
||||
<Link
|
||||
to="/profile"
|
||||
className="notifications flex space-x-4 items-center"
|
||||
@@ -517,8 +529,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
|
||||
</li> */}
|
||||
{/* <li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
|
||||
<Link
|
||||
to="/history"
|
||||
className="notifications flex space-x-4 items-center"
|
||||
@@ -558,8 +570,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
|
||||
</li> */}
|
||||
{/* <li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
|
||||
<Link
|
||||
to="/settings"
|
||||
className="notifications flex space-x-4 items-center"
|
||||
@@ -591,8 +603,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="content-item py-5">
|
||||
</li> */}
|
||||
{/* <li className="content-item py-5">
|
||||
<div className="notifications flex space-x-4 items-center">
|
||||
<div className="icon">
|
||||
<svg
|
||||
@@ -625,8 +637,196 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li> */}
|
||||
|
||||
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link
|
||||
to="/profile"
|
||||
className="notifications"
|
||||
>
|
||||
<div className="name">
|
||||
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
My Profile
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link
|
||||
to="/my-wallet"
|
||||
className="notifications"
|
||||
>
|
||||
<div className="name">
|
||||
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
My Wallet
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="content-item relative my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link
|
||||
to="#"
|
||||
className="notifications"
|
||||
>
|
||||
<div className="name">
|
||||
<p className="flex items-center justify-between text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
<span>Reports</span> <span>></span>
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
{/* report list items*/}
|
||||
<div className="inner-list-items absolute rounded-lg" onClick={setNotification}>
|
||||
<ul className="p-3">
|
||||
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link
|
||||
to="#"
|
||||
className="notifications"
|
||||
>
|
||||
<div className="name">
|
||||
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
Referrals
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link
|
||||
to="#"
|
||||
className="notifications"
|
||||
>
|
||||
<div className="name">
|
||||
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
Billing
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link
|
||||
to="#"
|
||||
className="notifications"
|
||||
>
|
||||
<div className="name">
|
||||
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
Payments
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link
|
||||
to="#"
|
||||
className="notifications"
|
||||
>
|
||||
<div className="name">
|
||||
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
Completed Jobs
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link
|
||||
to="#"
|
||||
className="notifications"
|
||||
>
|
||||
<div className="name">
|
||||
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
Previous Task
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<div className="px-7 py-3 cursor-pointer flex items-center">
|
||||
<div className={`h-6 w-8 mr-1 p-1 ${toggleNotification ? 'bg-sky-blue flex justify-end items-center': 'bg-slate-200'} rounded-full transition`}>
|
||||
<div className="w-4 h-full bg-white rounded-full"></div>
|
||||
</div>
|
||||
<p className="text-sm py-2 px-4 text-slate-400 dark:text-white">
|
||||
Notifications
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* end report list items*/}
|
||||
</li>
|
||||
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link
|
||||
to="#"
|
||||
className="notifications"
|
||||
>
|
||||
<div className="name">
|
||||
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white font-medium">
|
||||
My Statements
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<ul className="px-7">
|
||||
<li className="content-item relative my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link
|
||||
to="#"
|
||||
className="notifications"
|
||||
>
|
||||
<div className="name">
|
||||
<div className="flex items-center justify-between text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
<p>Language</p>
|
||||
<div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm">
|
||||
<p className="text-[10px]">English </p>
|
||||
<img className="w-[10px] h-[10px]" src={Flag} alt="U.S.A Flag" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
{/* langauge list items*/}
|
||||
<div className="inner-list-items absolute rounded-lg">
|
||||
<ul className="p-3">
|
||||
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link
|
||||
to="#"
|
||||
className="notifications"
|
||||
>
|
||||
<div className="name">
|
||||
<div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm text-sm py-1 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
<img className="w-[15px] h-[15px]" src={Flag} alt="U.S.A Flag" />
|
||||
<p className="text-sm">English </p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm text-sm py-1 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
<img className="w-[15px] h-[15px]" src={Flag} alt="U.S.A Flag" />
|
||||
<p className="text-sm">English </p>
|
||||
</div> */}
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
{/* end Language list items*/}
|
||||
</li>
|
||||
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link
|
||||
to="#"
|
||||
className="notifications"
|
||||
>
|
||||
<div className="name">
|
||||
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
Account Settings
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg cursor-pointer">
|
||||
<div className="name" onClick={logoutModalHandler}>
|
||||
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
Sign Out
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<hr className="mb-3"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user