consider scrolling for hover function (#4731)

this pr sets a flag to help indicate whether the page is being scrolled
so that the toggles don’t expand while scrolling. this pr also modifies
the `handleMouseEnter` function to check this flag and prevents the
toggle from expanding if the page is being scrolled.
- adds a new state variable to track if the page is scrolling.
- add event listeners for scroll events to set this variable.
- modifies the handleMouseEnter function to check the scrolling state.
So:
- `isScrolling` tracks if user is scrolling
- `handleScroll` function to call on scrolling events and disables
toggle if `isScrolling` is true
- `handleMouseEnter` checks for `isScrolling`

Author: mirnawong1

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'>