paragraph text underlined

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -83,9 +83,9 @@ function ActiveJobs() {
 
             <div className="mt-5 bg-white p-4 rounded-md shadow-md">
               <div className="">
-                <p className="text-lg font-bold text-slate-600 dark:text-blask tracking-wide">Message(s)</p>
+              <p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p>
                 <textarea
-                  className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none rounded-md"
+                  className="p-4 w-full text-base text-slate-600 border-y border-slate-300 outline-none"
                   rows="10"
                   style={{ resize: "none" }}
                 />

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,34 +220,103 @@ 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="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 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> */}
+
+        {/* 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="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">
-                  Enable Job Post
-                </span>
-              </NavLink>
+          
+          <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">
+                      Enable Job Post
+                    </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 ? (