.

components/layout/Generics/GenericHeader.js

 import { Avatar, Skeleton } from "antd";
-import Image from "next/image"
+import Image from "next/image";
 import { useRouter } from "next/router";
 import { signOut } from "next-auth/react";
-import { UserOutlined } from '@ant-design/icons';
+import { UserOutlined } from "@ant-design/icons";
 import { ToastContainer } from "react-toastify";
 import { useEffect, useRef, useState } from "react";
 export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, adminName, adminEmail, isRoute }) => {
   const innersBoxRef = useRef(null); // Ref to hold reference to inner-box div
   const [isGridViewOpen, setIsGridViewOpen] = useState(false);
+  const [isopen, setisopen] = useState(false);
   // Function to toggle the dropdown visibility
   const toggleGridViewDropdown = () => {
-        setIsGridViewOpen(!isGridViewOpen); // Toggle the state
+    if (isopen) {
+      setIsGridViewOpen(false);
+      setisopen(false);
+    }
+    if (!isopen) {
+      setisopen(true);
+      setIsGridViewOpen(true);
+    }
+    // Toggle the state
   };
 
   // Function to handle click outside
   const handleClickOutside = event => {
     if (innersBoxRef.current && !innersBoxRef.current.contains(event.target)) {
+        //   setTimeout(() => {
+        //     setisopen(false);
+        //   }, 500);
       setIsGridViewOpen(false); // Close if clicked outside
     }
   };
@@ -28,13 +40,14 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
   }, []);
   const router = useRouter();
   const VenderDetails = () => {
-        return <div>
-            {!venderBusiness && !venderEmail ?
+    return (
+      <div>
+        {!venderBusiness && !venderEmail ? (
           <div className="d-flex align-items-center gap-2">
             <Skeleton.Image active style={{ height: 50, width: 70 }} />
             <Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
           </div>
-                :
+        ) : (
           <div className="d-flex align-items-center gap-3">
             <Image src={businessLogo} height={50} width={70} objectFit="contain" />
             <div className="d-flex flex-column">
@@ -42,17 +55,19 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
               <p className="m-0">{venderEmail}</p>
             </div>
           </div>
-            }
+        )}
       </div>
-    }
+    );
+  };
   const AdminDetails = () => {
-        return <div>
-            {!adminName && !adminEmail ?
+    return (
+      <div>
+        {!adminName && !adminEmail ? (
           <div className="d-flex align-items-center gap-2">
             <Skeleton.Avatar active size={40} />
             <Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
           </div>
-                :
+        ) : (
           <div className="d-flex align-items-center gap-3">
             <Avatar icon={<UserOutlined />} active size={40} />
             <div className="d-flex flex-column">
@@ -60,51 +75,83 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
               <p className="m-0">{adminEmail}</p>
             </div>
           </div>
-            }
+        )}
       </div>
-    }
+    );
+  };
 
   return (
     <div
       className="bg-light px-5 d-flex align-items-center justify-content-between w-100"
       style={{
         height: 80,
-                boxshadow: '0px 1px 9px -3px rgba(0,0,0,0.56)',
-                '-webkit-box-shadow': '0px 1px 9px -3px rgba(0,0,0,0.56)',
-                '-moz-box-shadow': '0px 4px 1px -3px rgba(0,0,0,0.56)'
+        boxshadow: "0px 1px 9px -3px rgba(0,0,0,0.56)",
+        "-webkit-box-shadow": "0px 1px 9px -3px rgba(0,0,0,0.56)",
+        "-moz-box-shadow": "0px 4px 1px -3px rgba(0,0,0,0.56)"
       }}
     >
-
       <Image loading="lazy" objectFit="contain" height={50} width={100} alt="" className="" src="/images/main-logo.svg" />
       <div className="d-flex align-items-center gap-5">
         <div className="notification-row top-btn">
-                    <a onClick={toggleGridViewDropdown}>
+          <div onClick={toggleGridViewDropdown}>
             <img src="/images/icons/notification.svg" alt="" />
-                    </a>
+          </div>
           <div ref={innersBoxRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
             <div className="notification-inner">
               <div className="head">Notifications</div>
               <div className="inner">
-                                <div className="disc">Your Account is been verified you
-                                    can start adding activities now.</div>
-                                <div className="link"><a href="">Add Activity</a></div>
+                <div className="disc">Your Account is been verified you can start adding activities now.</div>
+                <div className="link">
+                  <a href="">Add Activity</a>
+                </div>
               </div>
               <div className="inner">
-                                <div className="disc">Your Account is been verified you
-                                    can start adding activities now.</div>
-                                <div className="link"><a href="">Add Activity</a></div>
+                <div className="disc">Your Account is been verified you can start adding activities now.</div>
+                <div className="link">
+                  <a href="">Add Activity</a>
+                </div>
               </div>
               <div className="inner">
-                                <div className="disc">Your Account is been verified you
-                                    can start adding activities now.</div>
-                                <div className="link"><a href="">Add Activity</a></div>
+                <div className="disc">Your Account is been verified you can start adding activities now.</div>
+                <div className="link">
+                  <a href="">Add Activity</a>
+                </div>
+              </div>
+              <div className="inner">
+                <div className="disc">Your Account is been verified you can start adding activities now.</div>
+                <div className="link">
+                  <a href="">Add Activity</a>
+                </div>
+              </div>
+              <div className="inner">
+                <div className="disc">Your Account is been verified you can start adding activities now.</div>
+                <div className="link">
+                  <a href="">Add Activity</a>
+                </div>
+              </div>
+              <div className="inner">
+                <div className="disc">Your Account is been verified you can start adding activities now.</div>
+                <div className="link">
+                  <a href="">Add Activity</a>
+                </div>
+              </div>
+              <div className="inner">
+                <div className="disc">Your Account is been verified you can start adding activities now.</div>
+                <div className="link">
+                  <a href="">Add Activity</a>
+                </div>
+              </div>
+              <div className="inner">
+                <div className="disc">Your Account is been verified you can start adding activities now.</div>
+                <div className="link">
+                  <a href="">Add Activity</a>
+                </div>
               </div>
             </div>
-
           </div>
         </div>
-                {isRoute === 'vendor' && <VenderDetails />}
-                {isRoute === 'admin' && <AdminDetails />}
+        {isRoute === "vendor" && <VenderDetails />}
+        {isRoute === "admin" && <AdminDetails />}
         <button
           className="btn btn-primary rounded-pill"
           style={{ height: 40 }}
@@ -118,5 +165,5 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
         </button>
       </div>
     </div>
-    )
-}
\ No newline at end of file
+  );
+};