Merge pull request #8 from steveebenezer/main

chore: Add scrollIntoView functionality for active category button (#2)

src/components/CategoryNavItem.jsx

@@ -1,9 +1,10 @@
 import { navigate } from "astro:transitions/client";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import data from "../data/tools.json";
 import "./CategoryNavItem.css";
 
 export default function CategoryNavItem(props) {
+  const buttonRef = useRef(null);
   const { title, category, filter } = props;
   const [isActive, setIsActive] = useState(false);
 
@@ -36,9 +37,25 @@ export default function CategoryNavItem(props) {
     return () => (subscription = !subscription);
   }, [filter]);
 
+  useEffect(() => {
+    let subscription = true;
+    const activeButton = buttonRef.current.classList.contains("is-active");
+
+    if (activeButton) {
+      buttonRef.current.scrollIntoView({
+        behavior: "instant",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+
+    return () => (subscription = !subscription);
+  }, [isActive]);
+
   return (
     <button
-      onClick={() => navigate(`/categories/${category}`)}
+      ref={buttonRef}
+      onClick={handleNavigation}
       className={`nav__item nu-u-text--secondary-alt nu-c-fs-normal nu-u-py-5 nu-u-px-0 nu-u-me-8 nav__item--filter ${
         isActive ? "is-active" : ""
       }`}