manage layout accnt type and fixed width of table
This commit is contained in:
Ebube
@@ -82,172 +82,126 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
|
||||
<ul className="flex flex-col space-y-6">
|
||||
{/* Using mini component reduces the bulk amount of html */}
|
||||
{[
|
||||
{ name: "Dashboard", path: "/" },
|
||||
{ name: "Market", path: "/market", bubble: noOfJobs },
|
||||
{ name: "My Task(s)", path: "/mytask" },
|
||||
].map(({ name, path, bubble }, idx) => (
|
||||
{ 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
|
||||
key={idx}
|
||||
title={name}
|
||||
route={path}
|
||||
bubble={bubble}
|
||||
sidebar
|
||||
sidebar={sidebar}
|
||||
iconName={iconName}
|
||||
/>
|
||||
))}
|
||||
{/*<li className="item group">*/}
|
||||
{/* <NavLink*/}
|
||||
{/* to="/notification"*/}
|
||||
{/* className="nav-item flex items-center justify-start space-x-3.5"*/}
|
||||
{/* >*/}
|
||||
{/* <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">*/}
|
||||
{/* <Icons name="notification" />*/}
|
||||
{/* </span>*/}
|
||||
{/* <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
|
||||
{/* Messages*/}
|
||||
{/* </span>*/}
|
||||
{/* </NavLink>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="item group">*/}
|
||||
{/* <NavLink*/}
|
||||
{/* to="/my-wallet"*/}
|
||||
{/* className="nav-item flex items-center justify-start space-x-3.5"*/}
|
||||
{/* >*/}
|
||||
{/* <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">*/}
|
||||
{/* <Icons name="wallet-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 active flex-1">*/}
|
||||
{/* My Wallet*/}
|
||||
{/* </span>*/}
|
||||
{/* </NavLink>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="item group">*/}
|
||||
{/* <NavLink*/}
|
||||
{/* to="/resources"*/}
|
||||
{/* className="nav-item flex items-center justify-start space-x-3.5"*/}
|
||||
{/* >*/}
|
||||
{/* <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">*/}
|
||||
{/* <Icons name="star" />*/}
|
||||
{/* </span>*/}
|
||||
{/* <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
|
||||
{/* Resources*/}
|
||||
{/* </span>*/}
|
||||
{/* </NavLink>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="item group">*/}
|
||||
{/* <NavLink*/}
|
||||
{/* to="/history"*/}
|
||||
{/* className="nav-item flex items-center justify-start space-x-3.5"*/}
|
||||
{/* >*/}
|
||||
{/* <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">*/}
|
||||
{/* <Icons name="history" />*/}
|
||||
{/* </span>*/}
|
||||
{/* <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
|
||||
{/* History*/}
|
||||
{/* </span>*/}
|
||||
{/* </NavLink>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="item group">*/}
|
||||
{/* <NavLink*/}
|
||||
{/* to="/referral"*/}
|
||||
{/* className="nav-item flex items-center justify-start space-x-3.5"*/}
|
||||
{/* >*/}
|
||||
{/* <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">*/}
|
||||
{/* <Icons name="history" />*/}
|
||||
{/* </span>*/}
|
||||
{/* <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
|
||||
{/* Refer a Friend*/}
|
||||
{/* </span>*/}
|
||||
{/* </NavLink>*/}
|
||||
{/*</li>*/}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!userDetails.post_jobs ? (
|
||||
<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"
|
||||
className="nav-item flex items-center justify-start space-x-3.5"
|
||||
>
|
||||
<span className="item-content relative group-hover:text-purple text-xl transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
|
||||
Enable Job Post
|
||||
</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
</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">
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/myjobs"
|
||||
className="nav-item flex items-center justify-start space-x-3.5"
|
||||
>
|
||||
<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">
|
||||
<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 active flex-1">
|
||||
My Jobs
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/my-active-jobs"
|
||||
className="nav-item flex items-center justify-start space-x-3.5"
|
||||
>
|
||||
<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">
|
||||
<Icons name="setting" />
|
||||
</span>
|
||||
<span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
|
||||
Pending
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/my-active-jobs"
|
||||
className="nav-item flex items-center justify-start space-x-3.5"
|
||||
>
|
||||
<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">
|
||||
<Icons name="setting" />
|
||||
</span>
|
||||
<span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
|
||||
Active Job(s)
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
</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>
|
||||
<div className="items">
|
||||
<ul className="flex flex-col space-y-6">
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/add-job"
|
||||
className="nav-item flex items-center justify-start space-x-3.5"
|
||||
>
|
||||
<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">
|
||||
<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 active flex-1">
|
||||
My Jobs
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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="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"
|
||||
}`}
|
||||
>
|
||||
Enable Job Post
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
) : (
|
||||
<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>
|
||||
{/* signout area */}
|
||||
|
||||
Reference in New Issue
Block a user