From 7c8d61379948e86ac0d36b8836ed72b6f200f21d Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Mon, 7 Oct 2024 12:30:35 -0400
Subject: [PATCH] on this page animation

Took 11 minutes
---
 src/components/on-this-page.tsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/on-this-page.tsx b/src/components/on-this-page.tsx
index ea1b386..447aaa7 100644
--- a/src/components/on-this-page.tsx
+++ b/src/components/on-this-page.tsx
@@ -5,8 +5,7 @@ import { Bars3CenterLeftIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { truncateText } from "@/lib/string";
-import { useInView } from "framer-motion";
-import { motion } from "framer-motion";
+import { motion, useInView } from "framer-motion";
 
 type Header = {
     id: string;
@@ -19,13 +18,11 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
     const [activeHeader, setActiveHeader] = useState<string | undefined>(
         undefined
     );
+    const observerRef = useRef<IntersectionObserver | undefined>(undefined);
+
     const ref = useRef<HTMLDivElement>(null);
     const inView = useInView(ref);
 
-    const observedHeaderRef = useRef<IntersectionObserver | undefined>(
-        undefined
-    );
-
     useEffect(() => {
         // Regular expression to match markdown headers
         const headerRegex: RegExp = /^(#{1,6})\s+(.*)$/gm;
@@ -48,8 +45,8 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
 
     useEffect(() => {
         // Cleanup existing observer
-        if (observedHeaderRef.current) {
-            observedHeaderRef.current.disconnect();
+        if (observerRef.current) {
+            observerRef.current.disconnect();
         }
 
         const observer = new IntersectionObserver(
@@ -62,7 +59,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
             },
             { rootMargin: "0px 0px -80% 0px", threshold: 0.1 }
         );
-        observedHeaderRef.current = observer;
+        observerRef.current = observer;
 
         // Observe all header elements
         headers.forEach((header: Header) => {