docs: fix sidebar navigation in API reference (#11179)

www/apps/api-reference/components/Tags/Section/Schema/index.tsx

@@ -30,10 +30,8 @@ export type TagSectionSchemaProps = {
 }
 
 const TagSectionSchema = ({ schema, tagName }: TagSectionSchemaProps) => {
-  const paramsRef = useRef<HTMLDivElement>(null)
   const { addItems, setActivePath, activePath } = useSidebar()
   const { displayedArea } = useArea()
-  const tagSlugName = useMemo(() => getSectionId([tagName]), [tagName])
   const formattedName = useMemo(
     () => singular(tagName).replaceAll(" ", ""),
     [tagName]
@@ -129,7 +127,7 @@ const TagSectionSchema = ({ schema, tagName }: TagSectionSchemaProps) => {
         root={root}
         threshold={0.1}
       >
-        <SectionContainer ref={paramsRef}>
+        <SectionContainer>
           <DividedLayout
             mainContent={
               <div>

www/apps/api-reference/components/Tags/Section/index.tsx

@@ -23,7 +23,7 @@ import clsx from "clsx"
 import { Feedback, Loading, Link } from "docs-ui"
 import { usePathname, useRouter } from "next/navigation"
 import { PathsObject, SchemaObject, TagObject } from "@/types/openapi"
-import { TagSectionSchemaProps } from "./Schema"
+import TagSectionSchema from "./Schema"
 import checkElementInViewport from "../../../utils/check-element-in-viewport"
 import TagPaths from "../Paths"
 import useSWR from "swr"
@@ -37,10 +37,6 @@ const Section = dynamic<SectionProps>(
   async () => import("../../Section")
 ) as React.FC<SectionProps>
 
-const TagSectionSchema = dynamic<TagSectionSchemaProps>(
-  async () => import("./Schema")
-) as React.FC<TagSectionSchemaProps>
-
 const MDXContentClient = dynamic<MDXContentClientProps>(
   async () => import("../../MDXContent/Client"),
   {
@@ -117,21 +113,22 @@ const TagSectionComponent = ({ tag }: TagSectionProps) => {
       rootMargin={`112px 0px 112px 0px`}
       root={root}
       onChange={(inView) => {
-        if (inView) {
-          if (!loadData) {
-            setLoadData(true)
+        if (!inView) {
+          return
+        }
+        if (!loadData) {
+          setLoadData(true)
+        }
+        // ensure that the hash link doesn't change if it links to an inner path
+        const currentHashArr = location.hash.replace("#", "").split("_")
+        if (currentHashArr.length < 2 || currentHashArr[0] !== slugTagName) {
+          if (location.hash !== slugTagName) {
+            router.push(`#${slugTagName}`, {
+              scroll: false,
+            })
           }
-          // ensure that the hash link doesn't change if it links to an inner path
-          const currentHashArr = location.hash.replace("#", "").split("_")
-          if (currentHashArr.length < 2 || currentHashArr[0] !== slugTagName) {
-            if (location.hash !== slugTagName) {
-              router.push(`#${slugTagName}`, {
-                scroll: false,
-              })
-            }
-            if (activePath !== slugTagName) {
-              setActivePath(slugTagName)
-            }
+          if (activePath !== slugTagName) {
+            setActivePath(slugTagName)
           }
         }
       }}