fixed bug
This commit is contained in:
Ebube
@@ -154,7 +154,7 @@ export default function Login() {
|
||||
Sign in
|
||||
</button>
|
||||
<button
|
||||
name="family"
|
||||
name="FAMILY"
|
||||
className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-l-0 border-[#4687ba] ${
|
||||
loginCom.family && "border-l-2 h-[45px]"
|
||||
}`}
|
||||
|
||||
+177
-189
@@ -1,4 +1,4 @@
|
||||
import React, { useContext,useState, useEffect } from "react";
|
||||
import React, { useContext, useState, useEffect } from "react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import bank1 from "../../assets/images/bank-1.png";
|
||||
import bank2 from "../../assets/images/bank-2.png";
|
||||
@@ -13,20 +13,18 @@ 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'
|
||||
import siteLogo from "../../assets/images/wrenchboard.png";
|
||||
import Flag from "../../assets/images/united-states.svg";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
|
||||
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 [toggleNotification, setToggleNotification] = useToggle(false);
|
||||
const darkMode = useContext(DarkModeContext);
|
||||
const {userDetails} = useSelector((state) => state?.userDetails)
|
||||
|
||||
const { userDetails } = useSelector((state) => state?.userDetails);
|
||||
|
||||
const [myWalletList, setMyWalletList] = useState([]);
|
||||
const api = new usersService();
|
||||
@@ -34,7 +32,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
const getMyWalletList = async () => {
|
||||
try {
|
||||
const res = await api.getUserWallets(null);
|
||||
console.log("wallet - > ",res.data);
|
||||
console.log("wallet - > ", res.data);
|
||||
setMyWalletList(res.data);
|
||||
} catch (error) {
|
||||
console.log("Error getting mode");
|
||||
@@ -87,22 +85,22 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
setbalanceValue.set(false);
|
||||
};
|
||||
|
||||
const setNotification = ()=> {
|
||||
setToggleNotification.toggle()
|
||||
}
|
||||
const setNotification = () => {
|
||||
setToggleNotification.toggle();
|
||||
};
|
||||
|
||||
// getting the location of head
|
||||
let {pathname} = useLocation()
|
||||
|
||||
let { pathname } = useLocation();
|
||||
|
||||
const handleWalletBtn = () => {
|
||||
if (pathname === "/my-wallet"){
|
||||
setbalanceValue.set(false)
|
||||
} else return balanceDropdown
|
||||
}
|
||||
if (pathname === "/my-wallet") {
|
||||
setbalanceValue.set(false);
|
||||
} else return balanceDropdown;
|
||||
};
|
||||
|
||||
// User Profile
|
||||
let {firstname, lastname, email, profile_pic} = userDetails
|
||||
let userEmail = email.split('@')[0]
|
||||
let { firstname, lastname, email, profile_pic } = userDetails;
|
||||
let userEmail = email.split("@")[0];
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -240,11 +238,12 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
|
||||
{/*<div className="lg:hidden block"></div>*/}
|
||||
<WalletHeader
|
||||
myWalletList={myWalletList}
|
||||
handlerBalance={handlerBalance}
|
||||
balanceDropdown={balanceDropdown}
|
||||
addMoneyHandler={addMoneyHandler}
|
||||
setBalanceDropdown = {setbalanceValue} />
|
||||
myWalletList={myWalletList}
|
||||
handlerBalance={handlerBalance}
|
||||
balanceDropdown={balanceDropdown}
|
||||
addMoneyHandler={addMoneyHandler}
|
||||
setBalanceDropdown={setbalanceValue}
|
||||
/>
|
||||
{/* notification */}
|
||||
<div className="user-notification lg:block hidden relative">
|
||||
<div
|
||||
@@ -481,18 +480,16 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
{/* profile-image */}
|
||||
<div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden">
|
||||
<img
|
||||
src={profile_pic != '' ? profile_pic : profileImg}
|
||||
src={profile_pic != "" ? profile_pic : profileImg}
|
||||
alt="profile"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="lg:block hidden">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||
{`${firstname} ${lastname}`}
|
||||
{`${firstname} ${lastname}`}
|
||||
</h1>
|
||||
<p className="text-sm text-thin-light-gray">
|
||||
@{userEmail}
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray">@{userEmail}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -505,7 +502,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
</div>
|
||||
<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">
|
||||
Fullname
|
||||
Fullname
|
||||
</h3>
|
||||
<p className="text-base text-gray-400 dark:text-white hover:text-sky-blue cursor-pointer">{`${firstname} ${lastname}`}</p>
|
||||
</div>
|
||||
@@ -657,23 +654,19 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
</div>
|
||||
</li> */}
|
||||
|
||||
{userDetails && userDetails?.account_type !== "FAMILY" && (
|
||||
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link to="/settings" 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="/settings"
|
||||
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"
|
||||
>
|
||||
<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
|
||||
@@ -681,155 +674,150 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
</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="/referral"
|
||||
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>
|
||||
{userDetails && userDetails?.account_type !== "FAMILY" && (
|
||||
<>
|
||||
<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="/referral" 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>
|
||||
</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>
|
||||
<p className="text-sm py-2 px-4 text-slate-400 dark:text-white">
|
||||
Notifications
|
||||
</p>
|
||||
</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>
|
||||
{/* 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" />
|
||||
{userDetails && userDetails?.account_type !== "FAMILY" && (
|
||||
<>
|
||||
<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>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
</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>
|
||||
{/* 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}>
|
||||
@@ -839,7 +827,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<hr className="mb-3"/>
|
||||
<hr className="mb-3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import React, { useContext } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import logo from "../../assets/images/wrenchboard.png"; //logo-2.svg";
|
||||
import logo3 from "../../assets/images/wrenchboard.png"; //logo-3.svg";
|
||||
import {
|
||||
default as logo,
|
||||
default as logo3,
|
||||
} from "../../assets/images/wrenchboard.png"; //logo-2.svg";
|
||||
import DarkModeContext from "../Contexts/DarkModeContext";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
|
||||
let { userDetails } = useSelector((state) => state.userDetails);
|
||||
@@ -81,32 +83,32 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
|
||||
<div className="items">
|
||||
<ul className="flex flex-col space-y-6">
|
||||
{/* Using mini component reduces the bulk amount of html */}
|
||||
{[
|
||||
{ name: "Dashboard", path: "/", iconName: "market" },
|
||||
userDetails?.account_type !== "family"
|
||||
? {
|
||||
name: "Market",
|
||||
path: "/market",
|
||||
bubble: noOfJobs,
|
||||
iconName: "market",
|
||||
}
|
||||
: {},
|
||||
{ name: "My Task(s)", path: "/mytask", iconName: "market" },
|
||||
].map(({ name, path, bubble, iconName }, idx) => (
|
||||
<ListItem
|
||||
title="Dashboard"
|
||||
route="/"
|
||||
sidebar={sidebar}
|
||||
iconName="market"
|
||||
/>
|
||||
{userDetails && userDetails?.account_type !== "FAMILY" && (
|
||||
<ListItem
|
||||
key={idx}
|
||||
title={name}
|
||||
route={path}
|
||||
bubble={bubble}
|
||||
title="Market"
|
||||
route="/market"
|
||||
bubble={noOfJobs}
|
||||
sidebar={sidebar}
|
||||
iconName={iconName}
|
||||
iconName="market"
|
||||
/>
|
||||
))}
|
||||
)}
|
||||
<ListItem
|
||||
title="My Task(s)"
|
||||
route="/mytask"
|
||||
sidebar={sidebar}
|
||||
iconName="market"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{userDetails?.account_type !== "family" && (
|
||||
{userDetails?.account_type !== "FAMILY" && (
|
||||
<>
|
||||
{!userDetails?.post_jobs ? (
|
||||
<div className="menu-setting-items mb-11">
|
||||
|
||||
+132
-115
@@ -1,10 +1,12 @@
|
||||
import React, { useContext, useEffect } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import logo from "../../assets/images/wrenchboard.png"; //logo-2.svg";
|
||||
import logo3 from "../../assets/images/wrenchboard.png"; //logo-3.svg";
|
||||
import {
|
||||
default as logo,
|
||||
default as logo3,
|
||||
} from "../../assets/images/wrenchboard.png"; //logo-2.svg";
|
||||
import DarkModeContext from "../Contexts/DarkModeContext";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
const darkMode = useContext(DarkModeContext);
|
||||
@@ -16,6 +18,10 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
const marketData = jobLists?.result_list;
|
||||
let noOfJobs = marketData?.length <= 0 ? "0" : marketData?.length;
|
||||
|
||||
function accntType() {
|
||||
return userDetails?.account_type !== "FAMILY";
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const title = document.querySelectorAll(".menu-setting-items .heading");
|
||||
if (sidebar) {
|
||||
@@ -103,33 +109,33 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
<div className="items">
|
||||
<ul className="flex flex-col space-y-6">
|
||||
{/* Using mini component reduces the bulk amount of html */}
|
||||
{[
|
||||
{ name: "Dashboard", path: "/", iconName: "market" },
|
||||
userDetails?.account_type !== "family"
|
||||
? {
|
||||
name: "Market",
|
||||
path: "/market",
|
||||
bubble: noOfJobs,
|
||||
iconName: "market",
|
||||
}
|
||||
: {},
|
||||
{ name: "My Task(s)", path: "/mytask", iconName: "market" },
|
||||
].map(({ name, path, bubble, iconName }, idx) => (
|
||||
<ListItem
|
||||
title="Dashboard"
|
||||
route="/"
|
||||
sidebar={sidebar}
|
||||
iconName="market"
|
||||
/>
|
||||
{userDetails && userDetails?.account_type !== "FAMILY" && (
|
||||
<ListItem
|
||||
key={idx}
|
||||
title={name}
|
||||
route={path}
|
||||
bubble={bubble}
|
||||
title="Market"
|
||||
route="/market"
|
||||
bubble={noOfJobs}
|
||||
sidebar={sidebar}
|
||||
iconName={iconName}
|
||||
iconName="market"
|
||||
/>
|
||||
))}
|
||||
)}
|
||||
<ListItem
|
||||
title="My Task(s)"
|
||||
route="/mytask"
|
||||
sidebar={sidebar}
|
||||
iconName="market"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* menu and settings item */}
|
||||
{userDetails?.account_type !== "family" && (
|
||||
{userDetails?.account_type !== "FAMILY" && (
|
||||
<div className="menu-setting-items mb-11">
|
||||
{/* menus item */}
|
||||
<div
|
||||
@@ -156,17 +162,16 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{userDetails?.account_type !== "family" && (
|
||||
<>
|
||||
{!userDetails?.post_jobs ? (
|
||||
<div className="menu-setting-items mb-11">
|
||||
{/* menus item */}
|
||||
<div
|
||||
className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
|
||||
sidebar ? "mb-14" : "rounded-none p-0"
|
||||
}`}
|
||||
>
|
||||
{/* <div className="setting-item">
|
||||
<>
|
||||
{!userDetails?.post_jobs ? (
|
||||
<div className="menu-setting-items mb-11">
|
||||
{/* menus item */}
|
||||
<div
|
||||
className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
|
||||
sidebar ? "mb-14" : "rounded-none p-0"
|
||||
}`}
|
||||
>
|
||||
{/* <div className="setting-item">
|
||||
<div className="top-platform bg-pink dark:bg-dark-white rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none border">
|
||||
<NavLink to="/start-job">
|
||||
<span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
|
||||
@@ -175,93 +180,98 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
</NavLink>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="items">
|
||||
<div className="heading mb-5">
|
||||
<h1 className="title text-xl font-bold text-purple">
|
||||
Job Post
|
||||
</h1>
|
||||
</div>
|
||||
<ul className="flex flex-col space-y-6">
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/start-job"
|
||||
className={`nav-item flex items-center ${
|
||||
((navData) => (navData.isActive ? "active" : ""),
|
||||
sidebar
|
||||
? "justify-start space-x-3.5"
|
||||
: "justify-center")
|
||||
<div className="items">
|
||||
<div className="heading mb-5">
|
||||
<h1 className="title text-xl font-bold text-purple">
|
||||
Job Post
|
||||
</h1>
|
||||
</div>
|
||||
<ul className="flex flex-col space-y-6">
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/start-job"
|
||||
className={`nav-item flex items-center ${
|
||||
((navData) => (navData.isActive ? "active" : ""),
|
||||
sidebar
|
||||
? "justify-start space-x-3.5"
|
||||
: "justify-center")
|
||||
}`}
|
||||
>
|
||||
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
|
||||
<Icons name="people-two" />
|
||||
</span>
|
||||
<span
|
||||
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
|
||||
sidebar ? "active flex-1" : "w-0"
|
||||
}`}
|
||||
>
|
||||
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
|
||||
<Icons name="people-two" />
|
||||
</span>
|
||||
<span
|
||||
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
|
||||
sidebar ? "active flex-1" : "w-0"
|
||||
}`}
|
||||
>
|
||||
Enable Job Post
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
Enable Job Post
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : jobLists?.result_list?.length ? (
|
||||
<>
|
||||
{userDetails?.account_type !== "FAMILY" && (
|
||||
<div className="setting-item">
|
||||
<div className="heading mb-5">
|
||||
<h1 className="title text-xl font-bold text-purple">
|
||||
My Jobs
|
||||
</h1>
|
||||
</div>
|
||||
<div className="items">
|
||||
<ul className="flex flex-col space-y-6">
|
||||
{[
|
||||
{
|
||||
name: "List",
|
||||
path: "/myjobs",
|
||||
iconName: "people-two",
|
||||
},
|
||||
{
|
||||
name: "Pending",
|
||||
path: "/my-pending-jobs",
|
||||
iconName: "people-two",
|
||||
},
|
||||
{
|
||||
name: "Active",
|
||||
path: "/my-active-jobs",
|
||||
iconName: "people-two",
|
||||
},
|
||||
].map(({ name, path, iconName }, idx) => (
|
||||
<ListItem
|
||||
key={idx}
|
||||
title={name}
|
||||
route={path}
|
||||
sidebar={sidebar}
|
||||
iconName={iconName}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="setting-item">
|
||||
<div className="heading mb-5">
|
||||
<h1 className="title text-xl font-bold text-purple">My Jobs</h1>
|
||||
</div>
|
||||
) : jobLists?.result_list?.length ? (
|
||||
<div className="setting-item">
|
||||
<div className="heading mb-5">
|
||||
<h1 className="title text-xl font-bold text-purple">
|
||||
My Jobs
|
||||
</h1>
|
||||
</div>
|
||||
<div className="items">
|
||||
<ul className="flex flex-col space-y-6">
|
||||
{[
|
||||
{ name: "List", path: "/myjobs", iconName: "people-two" },
|
||||
{
|
||||
name: "Pending",
|
||||
path: "/my-pending-jobs",
|
||||
iconName: "people-two",
|
||||
},
|
||||
{
|
||||
name: "Active",
|
||||
path: "/my-active-jobs",
|
||||
iconName: "people-two",
|
||||
},
|
||||
].map(({ name, path, iconName }, idx) => (
|
||||
<ListItem
|
||||
key={idx}
|
||||
title={name}
|
||||
route={path}
|
||||
sidebar={sidebar}
|
||||
iconName={iconName}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="items">
|
||||
<ul className="flex flex-col space-y-6">
|
||||
<ListItem
|
||||
title="Add Job"
|
||||
route="/add-job"
|
||||
iconName="people-two"
|
||||
sidebar={sidebar}
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<div className="setting-item">
|
||||
<div className="heading mb-5">
|
||||
<h1 className="title text-xl font-bold text-purple">
|
||||
My Jobs
|
||||
</h1>
|
||||
</div>
|
||||
<div className="items">
|
||||
<ul className="flex flex-col space-y-6">
|
||||
<ListItem
|
||||
title="Add Job"
|
||||
route="/add-job"
|
||||
iconName="people-two"
|
||||
sidebar={sidebar}
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
{/* signout area */}
|
||||
{sidebar ? (
|
||||
@@ -328,9 +338,16 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
);
|
||||
}
|
||||
|
||||
const ListItem = ({ sidebar, route, title, bubble, iconName }) => {
|
||||
const ListItem = ({
|
||||
sidebar,
|
||||
route,
|
||||
title,
|
||||
bubble,
|
||||
iconName,
|
||||
listClassName,
|
||||
}) => {
|
||||
return (
|
||||
<li className="item group">
|
||||
<li className={`item group ${listClassName}`}>
|
||||
<NavLink
|
||||
to={route}
|
||||
className={`nav-item flex items-center ${
|
||||
|
||||
Reference in New Issue
Block a user