make things pretty

packages/docs/app/components/sidebar-layout.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react"
+import { useEffect, useRef, useState } from "react"
+
+export function SidebarLayout({
+  sidebar,
+  body,
+}: {
+  sidebar: ReactNode
+  body: ReactNode
+}) {
+  const [offsetTop, setOffsetTop] = useState(0)
+  const sidebarRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setOffsetTop(sidebarRef.current?.offsetTop ?? 0)
+  }, [sidebarRef])
+
+  return (
+    <div className="flex items-start gap-6">
+      <div className="w-64 sticky" style={{ top: offsetTop }} ref={sidebarRef}>
+        {sidebar}
+      </div>
+      <div className="flex-1">{body}</div>
+    </div>
+  )
+}