.

components/layout/Header.js

@@ -50,7 +50,7 @@ const Header = () => {
     if (endUser) dispatch(getWishlists({ endUser: endUser.id }));
   }, [endUser]);
 
-// console.log("endUser", endUser);
+  // console.log("endUser", endUser);
   ////
   // const [isGridViewOpen, setIsGridViewOpen] = useState(false);
   const innerBoxRef = useRef(null); // Ref to hold reference to inner-box div
@@ -62,22 +62,17 @@ const Header = () => {
   };
 
   // Function to handle click outside
-  const handleClickOutside = (event) => {
-    if (
-      logoutBkRef.current &&
-      !logoutBkRef.current.contains(event.target) &&
-      innerBoxRef.current &&
-      !innerBoxRef.current.contains(event.target)
-    ) {
+  const handleClickOutside = event => {
+    if (logoutBkRef.current && !logoutBkRef.current.contains(event.target) && innerBoxRef.current && !innerBoxRef.current.contains(event.target)) {
       setIsGridViewOpen(false); // Close if clicked outside
     }
   };
 
   // Effect to add click event listener when component mounts
   useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
 
@@ -93,7 +88,7 @@ const Header = () => {
           </Navbar.Brand>
           {loadedUser && loadedUser.id ? (
             <div className="top-btn hide-on-desktop">
-              <div className="logout-bk" >
+              <div className="logout-bk">
                 <a onClick={toggleGridViewDropdown} className="user-icon">
                   <span className="image-container user-pic">
                     <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
@@ -104,6 +99,7 @@ const Header = () => {
                 </a>
                 {/* <p>{loadedUser.phone}</p> */}
                 <div ref={logoutBkRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
+                  {endUser && (
                     <div className="user-info">
                       <div className="pic">
                         <span className="image-container">
@@ -117,6 +113,7 @@ const Header = () => {
                         </div>
                       </div>
                     </div>
+                  )}
                   <div className="user-item">
                     <ul>
                       <li>
@@ -306,12 +303,14 @@ const Header = () => {
                               <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
                             </span>
                           </div>
-                          {endUser && <div className="">
+                          {endUser && (
+                            <div className="">
                               <div className="name">{endUser.attributes.name}</div>
                               <div className="view-profile">
                                 <a href="/user/profile">View Profile</a>
                               </div>
-                          </div>}
+                            </div>
+                          )}
                         </div>
                         <div className="user-item">
                           <ul>