docs: fixed sidebar in API reference (#5871)

www/apps/ui/src/providers/index.tsx

@@ -22,15 +22,13 @@ const Providers = ({ children }: ProvidersProps) => {
       <MobileProvider>
         <ColorModeProvider>
           <ModalProvider>
-            <SidebarProvider>
-              <NavbarProvider basePath={process.env.NEXT_PUBLIC_BASE_PATH}>
-                <SearchProvider>
-                  <ScrollControllerProvider scrollableSelector="#main">
-                    {children}
-                  </ScrollControllerProvider>
-                </SearchProvider>
-              </NavbarProvider>
-            </SidebarProvider>
+            <ScrollControllerProvider scrollableSelector="#main">
+              <SidebarProvider>
+                <NavbarProvider basePath={process.env.NEXT_PUBLIC_BASE_PATH}>
+                  <SearchProvider>{children}</SearchProvider>
+                </NavbarProvider>
+              </SidebarProvider>
+            </ScrollControllerProvider>
           </ModalProvider>
         </ColorModeProvider>
       </MobileProvider>

www/apps/ui/src/providers/sidebar.tsx

@@ -1,4 +1,7 @@
-import { SidebarProvider as UiSidebarProvider } from "docs-ui"
+import {
+  SidebarProvider as UiSidebarProvider,
+  useScrollController,
+} from "docs-ui"
 import { docsConfig } from "@/config/docs"
 
 type SidebarProviderProps = {
@@ -6,10 +9,12 @@ type SidebarProviderProps = {
 }
 
 const SidebarProvider = ({ children }: SidebarProviderProps) => {
+  const { scrollableElement } = useScrollController()
   return (
     <UiSidebarProvider
       initialItems={docsConfig.sidebar}
       shouldHandlePathChange={true}
+      scrollableElement={scrollableElement}
     >
       {children}
     </UiSidebarProvider>