updates

frontEnd/components/shared/layout/header/Header.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
@@ -12,6 +12,7 @@ const Header = () => {
   const [isActive, setIsActive] = useState(true);
   const [openDropdown, setOpenDropdown] = useState<number | null>(null);
   const [isMobile, setIsMobile] = useState(false);
+  const dropdownTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   
   // Fetch services from API
   const { services: apiServices, loading: servicesLoading, error: servicesError } = useNavigationServices();
@@ -112,6 +113,36 @@ const Header = () => {
     setOpenDropdown(openDropdown === index ? null : index);
   };
 
+  const handleDropdownEnter = (index: number) => {
+    if (dropdownTimeoutRef.current) {
+      clearTimeout(dropdownTimeoutRef.current);
+      dropdownTimeoutRef.current = null;
+    }
+    if (!isMobile) {
+      setOpenDropdown(index);
+    }
+  };
+
+  const handleDropdownLeave = (e: React.MouseEvent) => {
+    if (!isMobile) {
+      // Check if we're moving to the dropdown menu itself
+      const relatedTarget = e.relatedTarget as HTMLElement;
+      const currentTarget = e.currentTarget as HTMLElement;
+      
+      // If moving to a child element (dropdown menu), don't close
+      if (relatedTarget && currentTarget.contains(relatedTarget)) {
+        return;
+      }
+      
+      if (dropdownTimeoutRef.current) {
+        clearTimeout(dropdownTimeoutRef.current);
+      }
+      dropdownTimeoutRef.current = setTimeout(() => {
+        setOpenDropdown(null);
+      }, 300); // Increased delay to allow for scrolling
+    }
+  };
+
   useEffect(() => {
     const handleScroll = () => {
       const scrollPosition = window.scrollY;
@@ -145,6 +176,9 @@ const Header = () => {
     
     return () => {
       window.removeEventListener("resize", handleResize);
+      if (dropdownTimeoutRef.current) {
+        clearTimeout(dropdownTimeoutRef.current);
+      }
     };
   }, []);
 
@@ -200,12 +234,12 @@ const Header = () => {
                   <div className="navbar__menu d-none d-lg-flex">
                     <ul>
                       {navigationData.map((item) =>
-                        item.title === "Support Center" ? null : item.submenu ? (
+                        item.title === "Support Center" ? null :                         item.submenu ? (
                           <li
                             className="navbar__item navbar__item--has-children"
                             key={item.id}
-                            onMouseEnter={() => !isMobile && setOpenDropdown(item.id)}
-                            onMouseLeave={() => !isMobile && setOpenDropdown(null)}
+                            onMouseEnter={() => handleDropdownEnter(item.id)}
+                            onMouseLeave={(e) => handleDropdownLeave(e)}
                           >
                             <button
                               aria-label="dropdown menu"
@@ -222,7 +256,27 @@ const Header = () => {
                                 <span className="loading-indicator">⏳</span>
                               )}
                             </button>
-                            <ul className={`navbar__sub-menu ${openDropdown === item.id ? 'show' : ''}`}>
+                            <ul 
+                              className={`navbar__sub-menu ${openDropdown === item.id ? 'show' : ''}`}
+                              onMouseEnter={() => {
+                                if (dropdownTimeoutRef.current) {
+                                  clearTimeout(dropdownTimeoutRef.current);
+                                  dropdownTimeoutRef.current = null;
+                                }
+                                if (!isMobile) {
+                                  setOpenDropdown(item.id);
+                                }
+                              }}
+                              onMouseLeave={(e) => handleDropdownLeave(e)}
+                              onWheel={(e) => {
+                                // Prevent dropdown from closing when scrolling
+                                e.stopPropagation();
+                                if (dropdownTimeoutRef.current) {
+                                  clearTimeout(dropdownTimeoutRef.current);
+                                  dropdownTimeoutRef.current = null;
+                                }
+                              }}
+                            >
                               {item.title === "Services" && servicesLoading ? (
                                 <li>
                                   <span className="text-muted">Loading services...</span>