Set class active scrolled Id in menu

Author: pintoderian

app/components/header/_children/menu.js

@@ -1,12 +1,33 @@
 'use client';
 
+import useScroll from '@/hooks/useScroll';
 import useTranslate from '@/hooks/useTranslate';
 import { useMenuStore } from '@/store/menu';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 
 const Menu = ({ className }) => {
   const { active, setActive } = useMenuStore();
   const { translate } = useTranslate();
+  const { isScrolledIntoView } = useScroll();
+
+  const scrolledActive = useCallback(() => {
+    const isScrolledAbout = isScrolledIntoView('about');
+    const isScrolledSkills = isScrolledIntoView('skills');
+    if (isScrolledAbout) {
+      setActive('about');
+    } else if (!isScrolledAbout && !isScrolledSkills) {
+      setActive('experience');
+    } else if (isScrolledSkills) {
+      setActive('skills');
+    }
+  }, [setActive, isScrolledIntoView]);
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrolledActive);
+    return () => {
+      window.removeEventListener('scroll', scrolledActive);
+    };
+  }, [scrolledActive]);
 
   const activeClass = useCallback(
     (value) => {

hooks/useScroll.js

@@ -14,14 +14,27 @@ const useScroll = () => {
     }
   };
 
+  const isScrolledIntoView = (id) => {
+    const el = document.getElementById(id);
+    const rect = el.getBoundingClientRect();
+    const clientHeight = document.documentElement.clientHeight;
+    const clientWidth = document.documentElement.clientWidth;
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= (window.innerHeight || clientHeight) &&
+      rect.right <= (window.innerWidth || clientWidth)
+    );
+  };
+
   useEffect(() => {
     window.addEventListener('scroll', hasScrolled);
     return () => {
       window.removeEventListener('scroll', hasScrolled);
     };
   }, []);
 
-  return { isScroll };
+  return { isScroll, isScrolledIntoView };
 };
 
 export default useScroll;