From 7cb9cf24f736d8c857c4d818a5e2c039a5ad3d7e Mon Sep 17 00:00:00 2001
From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com>
Date: Thu, 27 Apr 2023 07:54:36 -0500
Subject: [PATCH] feat: add observer to page component

---
 src/app/components/Page.tsx                 | 33 ++++++++++++++++++++-
 src/docs/version_002/authentication/copy.md |  2 +-
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/app/components/Page.tsx b/src/app/components/Page.tsx
index bd5c5b4..1ce34c2 100644
--- a/src/app/components/Page.tsx
+++ b/src/app/components/Page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect, useRef, useState } from 'react';
 import { themes, useThemeContext } from '../theme';
 import { DocSection, DocsStructure } from '../types/types';
 import Main from './Main';
@@ -16,11 +17,41 @@ export default function Page({
 }) {
   const { theme } = useThemeContext();
   const themeStyles = themes[theme];
+  const docRef = useRef<HTMLDivElement>(null);
+  const [currentSection, setCurrentSection] = useState('');
+
+  useEffect(() => {
+    const titles =
+      document.querySelectorAll<HTMLHeadingElement>(
+        '.section-title'
+      );
+
+    const observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            setCurrentSection(entry.target.id);
+          }
+        });
+      },
+      {
+        root: null,
+        rootMargin: '-10% 0% -80% 0%',
+        threshold: 1,
+      }
+    );
+
+    titles.forEach(title => observer.observe(title));
+
+    return () => {
+      titles.forEach(title => observer.unobserve(title));
+    };
+  }, []);
 
   return (
     <div className={styles.wrapper} style={themeStyles}>
       <SideBar version={version} />
-      <div className={styles.container}>
+      <div ref={docRef} className={styles.container}>
         <NavBar version={version} />
         <Main versionSections={versionSections} />
       </div>
diff --git a/src/docs/version_002/authentication/copy.md b/src/docs/version_002/authentication/copy.md
index 7b5c9e5..0650998 100644
--- a/src/docs/version_002/authentication/copy.md
+++ b/src/docs/version_002/authentication/copy.md
@@ -1,4 +1,4 @@
-# Authentication {% #authentication %}
+# Authentication {% #authentication .section-title %}
 
 The Onpsring API uses API keys to authenticate requests. These keys are specific to a given Onspring instance. You can view and manage your API keys from within your instance.