.

src/components/Partials/MobileSideBar.jsx

@@ -228,7 +228,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
                       route="/myjobs"
                       iconName="people-two"
                       sidebar={sidebar}
-                      state={"Add Job"}
+                      state={true}
                     />
                   </ul>
                 </div>
@@ -302,12 +302,12 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
   );
 }
 
-const ListItem = ({ sidebar, route, title, bubble, state }) => {
+const ListItem = ({ sidebar, route, title, bubble, popup }) => {
   return (
     <li className="item group">
       <NavLink
         to={route}
-        state={state && {popup: true}}
+        state={popup ? { popup: true } : { popup: false }}
         className={`nav-item flex items-center  ${
           ((navData) => (navData.isActive ? "active" : ""),
           sidebar ? "justify-start space-x-3.5" : "justify-center")

src/components/Partials/Sidebar.jsx

@@ -8,7 +8,12 @@ import {
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 
-export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList }) {
+export default function Sidebar({
+  sidebar,
+  action,
+  logoutModalHandler,
+  myJobList,
+}) {
   const darkMode = useContext(DarkModeContext);
 
   let { userDetails } = useSelector((state) => state.userDetails);
@@ -131,27 +136,25 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
 
         {/* menu and settings item */}
         {userDetails?.account_type !== "FAMILY" && (
-            <div
-              className={`menu-item transition-all duration-300 ease-in-out ${
-                sidebar ? "my-5" : ""
-              }`}
-            >
-              <div className="heading mb-5">
-                <h1 className="title text-xl font-bold text-purple">
-                  Family
-                </h1>
-              </div>
-              <div className="items">
-                <ul className="flex flex-col space-y-6">
-                  <ListItem
-                    title="Family Corner"
-                    route="/acc-family"
-                    iconName="people-two"
-                    sidebar={sidebar}
-                  />
-                </ul>
-              </div>
+          <div
+            className={`menu-item transition-all duration-300 ease-in-out ${
+              sidebar ? "my-5" : ""
+            }`}
+          >
+            <div className="heading mb-5">
+              <h1 className="title text-xl font-bold text-purple">Family</h1>
             </div>
+            <div className="items">
+              <ul className="flex flex-col space-y-6">
+                <ListItem
+                  title="Family Corner"
+                  route="/acc-family"
+                  iconName="people-two"
+                  sidebar={sidebar}
+                />
+              </ul>
+            </div>
+          </div>
         )}
         {userDetails?.account_type !== "FAMILY" && (
           <>
@@ -252,7 +255,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
                       route="/myjobs"
                       iconName="people-two"
                       sidebar={sidebar}
-                      state={"Add Job"}
+                      popup={true}
                     />
                   </ul>
                 </div>
@@ -326,12 +329,12 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
   );
 }
 
-const ListItem = ({ sidebar, route, title, bubble, iconName, state }) => {
+const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
   return (
     <li className={`item group`}>
       <NavLink
         to={route}
-        state={state && {popup: true}}
+        state={popup ? { popup: true } : { popup: false }}
         className={`nav-item flex items-center  ${
           ((navData) => (navData.isActive ? "active" : ""),
           sidebar ? "justify-start space-x-3.5" : "justify-center")