Hook useMenu

Author: pintoderian

app/components/header/_children/menu.js

@@ -1,68 +1,33 @@
 'use client';
 
-import useScroll from '@/hooks/useScroll';
 import useTranslate from '@/hooks/useTranslate';
-import { useMenuStore } from '@/store/menu';
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 
 const Menu = ({ className }) => {
-  const { active, setActive } = useMenuStore();
+  const { activeClass, scrolledDivActive, handleScrollInDiv } = useMenu();
   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);
+    window.addEventListener('scroll', scrolledDivActive);
     return () => {
-      window.removeEventListener('scroll', scrolledActive);
+      window.removeEventListener('scroll', scrolledDivActive);
     };
-  }, [scrolledActive]);
-
-  const activeClass = useCallback(
-    (value) => {
-      return value === active
-        ? 'font-semibold text-neutral-800 dark:text-white'
-        : 'font-normal transition-all text-neutral-600 dark:text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200';
-    },
-    [active]
-  );
-
-  const handleAction = useCallback(
-    (value) => {
-      setActive(value);
-      const element = document?.getElementById(value);
-      element?.scrollIntoView({
-        behavior: 'smooth'
-      });
-    },
-    [setActive]
-  );
+  }, [scrolledDivActive]);
 
   return (
     <ul className={`gap-4 ${className}`}>
       <li className={activeClass('about')}>
-        <button onClick={() => handleAction('about')}>
+        <button onClick={() => handleScrollInDiv('about')}>
           {translate('about')}
         </button>
       </li>
       <li className={activeClass('experience')}>
-        <button onClick={() => handleAction('experience')}>
+        <button onClick={() => handleScrollInDiv('experience')}>
           {translate('experience')}
         </button>
       </li>
       <li className={activeClass('skills')}>
-        <button onClick={() => handleAction('skills')}>
+        <button onClick={() => handleScrollInDiv('skills')}>
           {translate('skills')}
         </button>
       </li>

hooks/useMenu.js

@@ -0,0 +1,44 @@
+import { useMenuStore } from '@/store/menu';
+import useScroll from './useScroll';
+import { useCallback } from 'react';
+
+const useMenu = () => {
+  const { active, setActive } = useMenuStore();
+  const { isScrolledIntoView } = useScroll();
+
+  const activeClass = useCallback(
+    (value) => {
+      return value === active
+        ? 'font-semibold text-neutral-800 dark:text-white'
+        : 'font-normal transition-all text-neutral-600 dark:text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200';
+    },
+    [active]
+  );
+
+  const scrolledDivActive = 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]);
+
+  const handleScrollInDiv = useCallback(
+    (value) => {
+      setActive(value);
+      const element = document?.getElementById(value);
+      element?.scrollIntoView({
+        behavior: 'smooth'
+      });
+    },
+    [setActive]
+  );
+
+  return { activeClass, scrolledDivActive, handleScrollInDiv };
+};
+
+export default useMenu;