[v3] consider navbar height for the anchor intersection observer

.changeset/red-squids-enjoy.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+Consider the navbar height when setting the root margin for the active anchor intersection observer

packages/nextra-theme-docs/src/constants.tsx

@@ -17,8 +17,6 @@ import { getGitIssueUrl, useGitEditUrl } from './utils'
 
 export const DEFAULT_LOCALE = 'en-US'
 
-export const IS_BROWSER = typeof window !== 'undefined'
-
 export type DocsThemeConfig = z.infer<typeof themeSchema>
 export type PartialDocsThemeConfig = z.infer<typeof publicThemeSchema>
 

packages/nextra-theme-docs/src/contexts/active-anchor.tsx

@@ -1,6 +1,5 @@
 import type { Dispatch, ReactElement, ReactNode, SetStateAction } from 'react'
-import { createContext, useContext, useRef, useState } from 'react'
-import { IS_BROWSER } from '../constants'
+import { createContext, useContext, useEffect, useRef, useState } from 'react'
 
 type ActiveAnchor = Record<
   string,
@@ -43,7 +42,13 @@ export const ActiveAnchorProvider = ({
 }): ReactElement => {
   const [activeAnchor, setActiveAnchor] = useState<ActiveAnchor>({})
   const observerRef = useRef<IntersectionObserver | null>(null)
-  if (IS_BROWSER && !observerRef.current) {
+
+  useEffect(() => {
+    if (observerRef.current) return
+    const nextraContentEl = document.querySelector<HTMLElement>('.nextra-content')
+    const rootMarginTop = nextraContentEl
+      ? `${0 - nextraContentEl.offsetTop}px`
+      : '0px'
     observerRef.current = new IntersectionObserver(
       entries => {
         setActiveAnchor(f => {
@@ -91,11 +96,16 @@ export const ActiveAnchorProvider = ({
         })
       },
       {
-        rootMargin: '0px 0px -50%',
+        rootMargin: `${rootMarginTop} 0px -50%`,
         threshold: [0, 1]
       }
     )
-  }
+
+    return () => {
+      observerRef.current?.disconnect()
+      observerRef.current = null
+    }
+  }, [])
   return (
     <ActiveAnchorContext.Provider value={activeAnchor}>
       <SetActiveAnchorContext.Provider value={setActiveAnchor}>