highlight active section in on this page
All checks were successful
Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 57s

Took 33 seconds
This commit is contained in:
Braydon 2024-10-06 20:21:41 -04:00
parent 99ab34b2ac
commit 106233c01f
2 changed files with 49 additions and 6 deletions

View File

@ -76,7 +76,7 @@ const DocsPage = async ({
</Breadcrumb>
{/* Content */}
<div className="flex justify-between">
<div className="flex gap-2.5 justify-between">
<div className="flex flex-col">
<CustomMDX source={page.content} />
</div>

View File

@ -1,8 +1,9 @@
"use client";
import { ReactElement, useEffect, useState } from "react";
import { ReactElement, useEffect, useRef, useState } from "react";
import { Bars3CenterLeftIcon } from "@heroicons/react/24/outline";
import Link from "next/link";
import { cn } from "@/lib/utils";
type Header = {
id: string;
@ -12,6 +13,10 @@ type Header = {
const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
const [headers, setHeaders] = useState<Header[]>([]);
const [activeHeader, setActiveHeader] = useState<string | undefined>(
undefined
);
const observerRef = useRef<IntersectionObserver | undefined>(undefined);
useEffect(() => {
// Regular expression to match markdown headers
@ -33,10 +38,41 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
setHeaders(extractedHeaders);
}, [page.content]);
useEffect(() => {
// Cleanup existing observer
if (observerRef.current) {
observerRef.current.disconnect();
}
const observer = new IntersectionObserver(
(entries: IntersectionObserverEntry[]) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
setActiveHeader(entry.target.id);
}
});
},
{ rootMargin: "0px 0px -80% 0px", threshold: 0.1 }
);
observerRef.current = observer;
// Observe all header elements
headers.forEach((header: Header) => {
const element: HTMLElement | null = document.getElementById(
header.id
);
if (element) {
observer.observe(element);
}
});
return () => observer.disconnect();
}, [headers]);
return (
<div className="flex flex-col gap-2 text-sm">
<div className="w-44 flex flex-col gap-2 text-sm select-none">
{/* Title */}
<div className="flex gap-2.5 items-center select-none">
<div className="flex gap-2.5 items-center">
<Bars3CenterLeftIcon className="w-5 h-5" />
<h1>On This Page</h1>
</div>
@ -46,10 +82,17 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
{headers.map((header: Header) => (
<li
key={header.id}
className="opacity-65 hover:opacity-80 transition-all transform-gpu"
className={cn(
"hover:opacity-80 transition-all transform-gpu",
activeHeader === header.id
? "font-semibold text-primary"
: "opacity-65"
)}
style={{ marginLeft: `${(header.level - 1) * 16}px` }}
>
<Link href={`#${header.id}`}>{header.text}</Link>
<Link href={`#${header.id}`} draggable={false}>
{header.text}
</Link>
</li>
))}
</ul>