Side bar Menu Close Bug Fixed

src/components/MyActiveJobs/index.jsx

@@ -24,13 +24,13 @@ export default function MyActiveJobs(props) {
                 >
                   Active Job(s)
                 </span>
+
                             </h1>
                         </div>
                         <div className="slider-btns flex space-x-4">
-              <div
+                            <div onClick={() => filterHandler("today")} className="relative">
-                onClick={() => filterHandler("today")}
+
-                className="relative"
+                            </div>
-              ></div>
                         </div>
                     </div>
                     <MyActiveJobTable MyJobList={props.MyJobList} />

src/components/MyJobs/index.jsx

@@ -25,19 +25,15 @@ export default function MyJobs(props) {
                                 My Jobs
                                 </span>
 
-                <Link
+                                <Link to='/add-job' className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
-                  to="/add-job"
-                  className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                >
                                     Add Job
                                 </Link>
                             </h1>
                         </div>
                         <div className="slider-btns flex space-x-4">
-              <div
+                            <div onClick={() => filterHandler("today")} className="relative">
-                onClick={() => filterHandler("today")}
+
-                className="relative"
+                        </div>
-              ></div>
                     </div>
                     </div>
                     <MyJobTable MyJobList={props.MyJobList} />

src/components/MyTasks/index.jsx

@@ -23,13 +23,13 @@ export default function MyTasks() {
                 >
                   My Tasks
                 </span>
+
                             </h1>
                         </div>
                         <div className="slider-btns flex space-x-4">
-              <div
+                            <div onClick={() => filterHandler("today")} className="relative">
-                onClick={() => filterHandler("today")}
+
-                className="relative"
+                        </div>
-              ></div>
                     </div>
                     </div>
                     <MyJobTable />

src/components/Partials/MobileSideBar.jsx

@@ -163,20 +163,19 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
           </div>
         </div>
 
-        {!userDetails.post_jobs ? (
+        {!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
+            <NavLink to="/start-job" className="nav-item flex items-center justify-start space-x-3.5">
-                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 ? (
+        :
+        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>
@@ -225,7 +224,9 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
               </ul>
             </div>
           </div>
-        ) : (
+          )
+          :
+          (
             <div className="setting-item">
               <div className="heading mb-5">
                 <h1 className="title text-xl font-bold text-purple">My Jobs</h1>
@@ -248,7 +249,8 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
                 </ul>
               </div>
             </div>
-        )}
+            )
+      }
       </div>
       {/* signout area */}
       {sidebar ? (

src/components/Partials/Sidebar.jsx

@@ -112,7 +112,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   title={name}
                   route={path}
                   bubble={bubble}
-                  sidebar
+                  sidebar = {sidebar}
                 />
               ))}
               {/*<li className="item group">*/}
@@ -220,28 +220,68 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
             </ul>
           </div>
         </div>
-        {/*<div className="setting-item">*/}
-        {/*  <div class="heading bg-pink dark:bg-dark-white   rounded-2xl p-6 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">*/}
-        {/*    <NavLink to="/acc-family">*/}
-        {/*      <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">*/}
-        {/*        Family Account*/}
-        {/*      </span>*/}
-        {/*    </NavLink>*/}
-        {/*  </div>*/}
-        {/*</div>*/}
 
-        <div className="setting-item">
+        {/* <div className="setting-item">
-          <div className="heading mb-5 bg-dark-blue   rounded-2xl p-2 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border">
+         <div class="heading bg-pink dark:bg-dark-white   rounded-2xl p-6 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border ">
+           <NavLink to="/acc-family">
+             <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">
+               Family Account
+             </span>
+           </NavLink>
+         </div>
+        </div> */}
+
+        {/* menu and settings item */}
+        <div className="menu-setting-items mb-11">
+          {/* menus item */}
+          <div className={`menu-item transition-all duration-300 ease-in-out ${
+              sidebar ? "mb-14" : ""
+            }`}>
+            {/* <div className="heading mb-5 bg-dark-blue   rounded-2xl p-2 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none  border">
               <NavLink to="/acc-family">
                 <h1 className="title text-xl font-bold text-purple">
                   Family Corner
                 </h1>
               </NavLink>
+            </div> */}
+            <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">
+                  <li className="item group">
+                    <NavLink
+                      to="/acc-family"
+                      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"
+                        }`}
+                      >
+                        Family Corner
+                      </span>
+                    </NavLink>
+                  </li>
+                </ul>
+              </div>
           </div>
         </div>
 
         {!userDetails.post_jobs ? (
-          <div className="setting-item">
+          
+          <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">
@@ -249,6 +289,35 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     </span>
                   </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")
+                      }`}
+                    >
+                      <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">