split sidebars + optimize generated files loading

www/apps/resources/providers/sidebar.tsx

@@ -1,9 +1,13 @@
 "use client"
+
 import {
   SidebarProvider as UiSidebarProvider,
   useScrollController,
 } from "docs-ui"
-import { config } from "@/config"
+import { usePathname } from "next/navigation"
+import { useCallback, useEffect, useState } from "react"
+import { Sidebar } from "types"
+import { getSidebarForPath } from "../utils/get-sidebar-for-path"
 
 type SidebarProviderProps = {
   children?: React.ReactNode
@@ -11,11 +15,36 @@ type SidebarProviderProps = {
 
 const SidebarProvider = ({ children }: SidebarProviderProps) => {
   const { scrollableElement } = useScrollController()
+  const [sidebar, setSidebar] = useState<Sidebar.Sidebar | undefined>()
+  const pathname = usePathname()
+
+  const loadSidebar = useCallback(
+    async () => getSidebarForPath(pathname),
+    [pathname]
+  )
+
+  useEffect(() => {
+    loadSidebar()
+      .then(setSidebar)
+      .catch((error) => {
+        console.error("Error loading sidebar:", error)
+      })
+  }, [loadSidebar])
 
   return (
     <UiSidebarProvider
       scrollableElement={scrollableElement}
-      sidebars={config.sidebars}
+      sidebars={
+        sidebar
+          ? [sidebar]
+          : [
+              {
+                sidebar_id: "default",
+                title: "Default",
+                items: [],
+              },
+            ]
+      }
     >
       {children}
     </UiSidebarProvider>