consider scrolling for hover function

website/src/components/detailsToggle/index.js

@@ -3,33 +3,49 @@ import styles from './styles.module.css';
 
 function detailsToggle({ children, alt_header = null }) {
   const [isOn, setOn] = useState(false);
-  const [hoverActive, setHoverActive] = useState(true);
+  const [isScrolling, setIsScrolling] = useState(false); // New state to track scrolling
   const [hoverTimeout, setHoverTimeout] = useState(null);
 
   const handleToggleClick = () => {
-    setHoverActive(true); // Disable hover when clicked
     setOn(current => !current); // Toggle the current state
-};
-
-const handleMouseEnter = () => {
-  if (isOn) return; // Ignore hover if already open
-  setHoverActive(true); // Enable hover
-  const timeout = setTimeout(() => {
-      if (hoverActive) setOn(true);
-  }, 500); 
-  setHoverTimeout(timeout);
-};
-
-const handleMouseLeave = () => {
-  if (!isOn) {
+  };
+
+  const handleMouseEnter = () => {
+    if (isOn || isScrolling) return; // Ignore hover if already open or if scrolling
+    const timeout = setTimeout(() => {
+      if (!isScrolling) setOn(true);
+    }, 700); // 
+    setHoverTimeout(timeout);
+  };
+
+  const handleMouseLeave = () => {
+    if (!isOn) {
       clearTimeout(hoverTimeout);
       setOn(false);
-  }
-};
+    }
+  };
+
+  const handleScroll = () => {
+    setIsScrolling(true);
+    clearTimeout(hoverTimeout);
+    setOn(false);
+
+    // Reset scrolling state after a  delay
+    setTimeout(() => {
+      setIsScrolling(false);
+    }, 800);
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
 
-useEffect(() => {
-  return () => clearTimeout(hoverTimeout);
-}, [hoverTimeout]);
+  useEffect(() => {
+    return () => clearTimeout(hoverTimeout);
+  }, [hoverTimeout]);
 
   return (
     <div className='detailsToggle'>