docs: fixed sidebar in API reference (#5871)

www/apps/api-reference/providers/index.tsx

@@ -25,15 +25,15 @@ const Providers = ({ children }: ProvidersProps) => {
         <ModalProvider>
           <ColorModeProvider>
             <BaseSpecsProvider>
-              <SidebarProvider>
-                <NavbarProvider>
-                  <ScrollControllerProvider scrollableSelector="#main">
+              <ScrollControllerProvider scrollableSelector="#main">
+                <SidebarProvider>
+                  <NavbarProvider>
                     <SearchProvider>
                       <MobileProvider>{children}</MobileProvider>
                     </SearchProvider>
-                  </ScrollControllerProvider>
-                </NavbarProvider>
-              </SidebarProvider>
+                  </NavbarProvider>
+                </SidebarProvider>
+              </ScrollControllerProvider>
             </BaseSpecsProvider>
           </ColorModeProvider>
         </ModalProvider>

www/apps/api-reference/providers/sidebar.tsx

@@ -1,5 +1,9 @@
 "use client"
-import { SidebarProvider as UiSidebarProvider, usePageLoading } from "docs-ui"
+import {
+  SidebarProvider as UiSidebarProvider,
+  usePageLoading,
+  useScrollController,
+} from "docs-ui"
 
 type SidebarProviderProps = {
   children?: React.ReactNode
@@ -7,12 +11,14 @@ type SidebarProviderProps = {
 
 const SidebarProvider = ({ children }: SidebarProviderProps) => {
   const { isLoading, setIsLoading } = usePageLoading()
+  const { scrollableElement } = useScrollController()
 
   return (
     <UiSidebarProvider
       isLoading={isLoading}
       setIsLoading={setIsLoading}
       shouldHandleHashChange={true}
+      scrollableElement={scrollableElement}
       initialItems={{
         top: [
           {