header onclick issue resolved

components/layout/Header.js

 import { getSession, signOut } from "next-auth/react";
 import { getSession, signOut } from "next-auth/react";
 import Image from "next/image";
 import Image from "next/image";
 import Link from "next/link";
 import Link from "next/link";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useDispatch, useSelector } from "react-redux";
 import { cleanImage } from "../../services/imageHandling";
 import { cleanImage } from "../../services/imageHandling";
 import { Button, Container, Form, Nav, Navbar } from "react-bootstrap";
 import { Button, Container, Form, Nav, Navbar } from "react-bootstrap";
@@ -24,9 +24,9 @@ const Header = () => {
   // console.log("user", loadedUser);
   // console.log("user", loadedUser);
   const [isSticky, setIsSticky] = useState(false);
   const [isSticky, setIsSticky] = useState(false);
   const router = useRouter();
   const router = useRouter();
-  const toggleGridViewDropdown = () => {
-    setIsGridViewOpen(!isGridViewOpen);
-  };
+  // const toggleGridViewDropdown = () => {
+  //   setIsGridViewOpen(!isGridViewOpen);
+  // };
   useEffect(() => {
   useEffect(() => {
     const handleScroll = () => {
     const handleScroll = () => {
       // Check if the scroll position is greater than a certain threshold
       // Check if the scroll position is greater than a certain threshold
@@ -49,6 +49,38 @@ const Header = () => {
   useEffect(() => {
   useEffect(() => {
     if (endUser) dispatch(getWishlists({ endUser: endUser.id }));
     if (endUser) dispatch(getWishlists({ endUser: endUser.id }));
   }, [endUser]);
   }, [endUser]);
+
+
+  ////
+  // const [isGridViewOpen, setIsGridViewOpen] = useState(false);
+  const innerBoxRef = useRef(null); // Ref to hold reference to inner-box div
+  const logoutBkRef = useRef(null);
+
+  // Function to toggle the dropdown visibility
+  const toggleGridViewDropdown = () => {
+    setIsGridViewOpen(!isGridViewOpen); // Toggle the state
+  };
+
+  // Function to handle click outside
+  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);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   return (
   return (
     <header className={`header_wrap ${isSticky ? "stick" : ""}`}>
     <header className={`header_wrap ${isSticky ? "stick" : ""}`}>
       {isSticky && <div style={{ height: 76 }} className="bg-transparent"></div>}
       {isSticky && <div style={{ height: 76 }} className="bg-transparent"></div>}
@@ -61,7 +93,7 @@ const Header = () => {
           </Navbar.Brand>
           </Navbar.Brand>
           {loadedUser && loadedUser.id ? (
           {loadedUser && loadedUser.id ? (
             <div className="top-btn hide-on-desktop">
             <div className="top-btn hide-on-desktop">
-              <div className="logout-bk">
+              <div className="logout-bk" >
                 <a onClick={toggleGridViewDropdown} className="user-icon">
                 <a onClick={toggleGridViewDropdown} className="user-icon">
                   <span className="image-container user-pic">
                   <span className="image-container user-pic">
                     <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
                     <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
@@ -71,7 +103,7 @@ const Header = () => {
                   </span>
                   </span>
                 </a>
                 </a>
                 {/* <p>{loadedUser.phone}</p> */}
                 {/* <p>{loadedUser.phone}</p> */}
-                <div className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
+                <div ref={logoutBkRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
                   <div className="user-info">
                   <div className="user-info">
                     <div className="pic">
                     <div className="pic">
                       <span className="image-container">
                       <span className="image-container">
@@ -267,7 +299,7 @@ const Header = () => {
                         </span>
                         </span>
                       </a>
                       </a>
                       {/* <p>{loadedUser.phone}</p> */}
                       {/* <p>{loadedUser.phone}</p> */}
-                      <div className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
+                      <div ref={innerBoxRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
                         <div className="user-info">
                         <div className="user-info">
                           <div className="pic">
                           <div className="pic">
                             <span className="image-container">
                             <span className="image-container">

styles/globals.css

@@ -1920,6 +1920,7 @@ span.form-error,
 .vendorDetails p.pview {
 .vendorDetails p.pview {
   color: #0070bd;
   color: #0070bd;
   text-decoration: underline;
   text-decoration: underline;
+  word-wrap: break-word;
 }
 }
 
 
 .vendorDetails .borderLeft {
 .vendorDetails .borderLeft {