WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

sidemenu abnormal gap closed

Browse Source
This commit was merged in pull request #148.
This commit is contained in:
victorAnumudu
2023-06-08 18:00:26 +01:00
parent 313c47f430
commit 1d673487af
2 changed files with 109 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Partials/MobileSideBar.jsx
+24 -23
View File
@@ -76,7 +76,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
{/* menu and settings item */} {/* menu and settings item */}
<div className="menu-setting-items mb-11"> <div className="menu-setting-items mb-11">
{/* menus item */} {/* menus item */}
<div className="menu-item transition-all duration-300 ease-in-out mb-14"> <div className="menu-item transition-all duration-300 ease-in-out mb-5">
<div className="heading mb-5 active"> <div className="heading mb-5 active">
<h1 className="title text-xl font-bold text-purple">Menu</h1> <h1 className="title text-xl font-bold text-purple">Menu</h1>
</div> </div>
@@ -110,20 +110,17 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
{/* menu and settings item */} {/* menu and settings item */}
{userDetails?.account_type !== "FAMILY" && ( {userDetails?.account_type !== "FAMILY" && (
<div className="menu-setting-items mb-11">
{/* menus item */}
<div <div
className={`menu-item transition-all duration-300 ease-in-out ${ className={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-14" : "" sidebar ? "mb-5" : "mb-2"
}`} }`}
> >
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
Family
</h1>
</div>
<div className="items"> <div className="items">
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
Family
</h1>
</div>
<ul className="flex flex-col space-y-6"> <ul className="flex flex-col space-y-6">
<ListItem <ListItem
title="Family Corner" title="Family Corner"
@@ -134,25 +131,22 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
</ul> </ul>
</div> </div>
</div> </div>
</div>
)} )}
{userDetails?.account_type !== "FAMILY" && ( {userDetails?.account_type !== "FAMILY" && (
<> <>
{!userDetails?.post_jobs ? ( {!userDetails?.post_jobs ? (
<div className="menu-setting-items mb-11">
{/* menus item */}
<div <div
className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${ 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" sidebar ? "mb-5" : "mb-2 rounded-none p-0"
}`} }`}
> >
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
Job Post
</h1>
</div>
<div className="items"> <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"> <ul className="flex flex-col space-y-6">
<li className="item group"> <li className="item group">
<NavLink <NavLink
@@ -179,9 +173,12 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
</ul> </ul>
</div> </div>
</div> </div>
</div>
) : myJobList?.data?.result_list?.length ? ( ) : myJobList?.data?.result_list?.length ? (
<div className="setting-item"> <div
className={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-5" : "mb-2"
}`}
>
<div className="heading mb-5"> <div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple"> <h1 className="title text-xl font-bold text-purple">
My Jobs My Jobs
@@ -213,8 +210,12 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
</ul> </ul>
</div> </div>
</div> </div>
) : !myJobList?.loading && ( ) : (
<div className="setting-item"> <div
className={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-5" : "mb-2"
}`}
>
<div className="heading mb-5"> <div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple"> <h1 className="title text-xl font-bold text-purple">
My Jobs My Jobs
src/components/Partials/Sidebar.jsx
+85 -85
View File
@@ -95,7 +95,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
{/* menus item */} {/* menus item */}
<div <div
className={`menu-item transition-all duration-300 ease-in-out ${ className={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-14" : "" sidebar ? "mb-5" : "mb-2"
}`} }`}
> >
<div className="heading mb-5"> <div className="heading mb-5">
@@ -131,19 +131,17 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
{/* menu and settings item */} {/* menu and settings item */}
{userDetails?.account_type !== "FAMILY" && ( {userDetails?.account_type !== "FAMILY" && (
<div className="menu-setting-items mb-11">
{/* menus item */}
<div <div
className={`menu-item transition-all duration-300 ease-in-out ${ className={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-14" : "" sidebar ? "my-5" : ""
}`} }`}
> >
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
Family
</h1>
</div>
<div className="items"> <div className="items">
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
Family
</h1>
</div>
<ul className="flex flex-col space-y-6"> <ul className="flex flex-col space-y-6">
<ListItem <ListItem
title="Family Corner" title="Family Corner"
@@ -154,92 +152,94 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
</ul> </ul>
</div> </div>
</div> </div>
</div>
)} )}
{userDetails?.account_type !== "FAMILY" && ( {userDetails?.account_type !== "FAMILY" && (
<> <>
{!userDetails?.post_jobs ? ( {!userDetails?.post_jobs ? (
<div className="menu-setting-items mb-11"> <div
{/* menus item */} className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
<div sidebar ? "mb-5" : "mb-2 rounded-none p-0"
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="heading mb-5">
> <h1 className="title text-xl font-bold text-purple">
<div className="items"> Job Post
<div className="heading mb-5"> </h1>
<h1 className="title text-xl font-bold text-purple"> </div>
Job Post <div className="items">
</h1> <ul className="flex flex-col space-y-6">
</div> <li className="item group">
<ul className="flex flex-col space-y-6"> <NavLink
<li className="item group"> to="/start-job"
<NavLink className={`nav-item flex items-center ${
to="/start-job" ((navData) => (navData.isActive ? "active" : ""),
className={`nav-item flex items-center ${ sidebar
((navData) => (navData.isActive ? "active" : ""), ? "justify-start space-x-3.5"
sidebar : "justify-center")
? "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"> Enable Job Post
<Icons name="people-two" /> </span>
</span> </NavLink>
<span </li>
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${ </ul>
sidebar ? "active flex-1" : "w-0"
}`}
>
Enable Job Post
</span>
</NavLink>
</li>
</ul>
</div>
</div> </div>
</div> </div>
) : myJobList?.data?.result_list?.length ? ( ) : myJobList?.data?.result_list?.length ? (
<> <div
<div className="setting-item"> className={`menu-item transition-all duration-300 ease-in-out ${
<div className="heading mb-5"> sidebar ? "mb-5" : "mb-2"
<h1 className="title text-xl font-bold text-purple"> }`}
My Jobs >
</h1> <div className="heading mb-5">
</div> <h1 className="title text-xl font-bold text-purple">
<div className="items"> My Jobs
<ul className="flex flex-col space-y-6"> </h1>
{[
{
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>
</> <div className="items">
) : !myJobList?.loading && ( <ul className="flex flex-col space-y-6">
<div className="setting-item"> {[
{
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={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-5" : "mb-2"
}`}
>
<div className="heading mb-5"> <div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple"> <h1 className="title text-xl font-bold text-purple">
My Jobs My Jobs