wishlist link added in navbar and no wishlist items condition added

components/layout/Header.js

@@ -46,7 +46,7 @@ const Header = () => {
   }, [endUser]);
   return (
     <header className={`header_wrap ${isSticky ? "stick" : ""}`}>
-     {isSticky && <div style={{height :76}} className="bg-transparent"></div>}
+      {isSticky && <div style={{ height: 76 }} className="bg-transparent"></div>}
       <Navbar expand="lg" className="bg-body-tertiary">
         <Container fluid>
           <Navbar.Brand href="/">
@@ -57,6 +57,9 @@ const Header = () => {
           <Navbar.Toggle aria-controls="navbarScroll" />
           <Navbar.Collapse id="navbarScroll">
             <Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
+              <ActiveLink href="/user/wishlist" activeClassName="active">
+                <a className="nav-link ">Wishlist</a>
+              </ActiveLink>
               <ActiveLink href="/blog" activeClassName="active">
                 <a className="nav-link ">Blogs</a>
               </ActiveLink>

components/user/MyWhishList.js

@@ -15,7 +15,9 @@ const MyWhishList = ({ data }) => {
                         <h2 className="px-2 px-lg-0">My Bookings</h2>
                         <div className="listing-items">
                             <div className="row">
-                                {data?.length && data.map((data, index) => (
+                                {data?.length > 0 ?
+                                    <>
+                                        {data.map((data, index) => (
                                             <div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}>
                                                 <div className="item">
                                                     <div className="browse-experiences-item">
@@ -40,7 +42,7 @@ const MyWhishList = ({ data }) => {
                                                             </div>
                                                             <div className="discription"><p className="text-trunc-2">{data?.attributes?.experience?.data?.attributes?.description}</p></div>
                                                             <div className="price">
-                                                        ${data?.attributes?.experience?.data?.attributes?.pricePerPerson} <span className="off">{}% OFF</span>
+                                                                ${data?.attributes?.experience?.data?.attributes?.pricePerPerson} <span className="off">{ }% OFF</span>
                                                             </div>
                                                             <div className="detail">
                                                                 <div className="">For 1 Night</div>
@@ -61,6 +63,13 @@ const MyWhishList = ({ data }) => {
                                                 </div>
                                             </div>
                                         ))}
+                                    </>
+                                    :
+                                    <>
+                                        <p>No Item Found</p>
+                                    </>
+
+                                }
                             </div>
                         </div>
                     </div>