add docs page

morpheus-client/components/Navbar/Navbar.module.scss

@@ -3,6 +3,7 @@
 @use "styles/typography";
 
 .navbarContainer {
+  position: fixed;
   height: 80px;
   min-height: 80px;
   max-height: 80px;

morpheus-client/components/Navbar/Navbar.tsx

@@ -56,8 +56,8 @@ const NavMenu = (props: NavMenuProps) => {
         <Link className={getLinkStyles("gallery")} href={"/gallery"}>
           Gallery
         </Link>
-        <Link className={getLinkStyles("about")} href={"/about"}>
-          About
+        <Link className={getLinkStyles("about")} href={"/docs"}>
+          Docs
         </Link>
       </div>
 

morpheus-client/hooks/useHeadsObserver.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState, useRef } from "react";
+
+function useHeadsObserver() {
+  const observer = useRef<IntersectionObserver | null>(null);
+  const [activeId, setActiveId] = useState("");
+
+  useEffect(() => {
+    const handleObserver = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setActiveId(entry.target.id);
+        }
+      });
+    };
+
+    observer.current = new IntersectionObserver(handleObserver, {
+      rootMargin: "-20% 0% -35% 0px",
+    });
+
+    const elements = document.querySelectorAll("h2, h3, h4");
+    elements.forEach((elem) => {
+      if (observer.current) {
+        observer.current.observe(elem);
+      }
+    });
+
+    return () => observer.current?.disconnect();
+  }, []);
+
+  return { activeId };
+}
+
+export default useHeadsObserver;