fix: preserve sidebar scroll position across navigations

Move Layout to layout.tsx and render only Page in page.tsx.
Sidebar scroll preserved via module-level variable targeting
Apsara Sidebar.Main scrollable element. Remove duplicate
border-right and overflow-y from sidebar CSS.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: rsbh

packages/chronicle/src/app/[[...slug]]/layout.tsx

@@ -0,0 +1,15 @@
+import { loadConfig } from '@/lib/config'
+import { buildPageTree } from '@/lib/source'
+import { getTheme } from '@/themes/registry'
+
+export default function DocsLayout({ children }: { children: React.ReactNode }) {
+  const config = loadConfig()
+  const tree = buildPageTree()
+  const { Layout, className } = getTheme(config.theme?.name)
+
+  return (
+    <Layout config={config} tree={tree} classNames={{ layout: className }}>
+      {children}
+    </Layout>
+  )
+}

packages/chronicle/src/app/[[...slug]]/page.tsx

@@ -26,29 +26,27 @@ export default async function DocsPage({ params }: PageProps) {
     notFound()
   }
 
-  const { Layout, Page, className } = getTheme(config.theme?.name)
+  const { Page } = getTheme(config.theme?.name)
 
   const data = page.data as PageData
   const MDXBody = data.body
 
   const tree = buildPageTree()
 
   return (
-    <Layout config={config} tree={tree} classNames={{ layout: className }}>
-      <Page
-        page={{
-          slug: slug ?? [],
-          frontmatter: {
-            title: data.title,
-            description: data.description,
-          },
-          content: <MDXBody components={mdxComponents} />,
-          toc: data.toc ?? [],
-        }}
-        config={config}
-        tree={tree}
-      />
-    </Layout>
+    <Page
+      page={{
+        slug: slug ?? [],
+        frontmatter: {
+          title: data.title,
+          description: data.description,
+        },
+        content: <MDXBody components={mdxComponents} />,
+        toc: data.toc ?? [],
+      }}
+      config={config}
+      tree={tree}
+    />
   )
 }
 

packages/chronicle/src/themes/default/Layout.module.css

@@ -16,9 +16,6 @@
 
 .sidebar {
   width: 260px;
-  padding: var(--rs-space-5);
-  border-right: 1px solid var(--rs-color-border-base-primary);
-  overflow-y: auto;
   position: sticky;
   top: 0;
   height: 100vh;

packages/chronicle/src/themes/default/Layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useEffect, useRef, useCallback } from "react";
 import { usePathname } from "next/navigation";
 import NextLink from "next/link";
 import { cx } from "class-variance-authority";
@@ -22,8 +22,28 @@ const iconMap: Record<string, React.ReactNode> = {
   "method-patch": <MethodBadge method="PATCH" size="micro" />,
 };
 
+let savedScrollTop = 0;
+
 export function Layout({ children, config, tree, classNames }: ThemeLayoutProps) {
   const pathname = usePathname();
+  const sidebarRef = useRef<HTMLElement>(null);
+
+  const getScrollEl = useCallback(() => {
+    return sidebarRef.current?.querySelector('[class*="main"]') as HTMLElement | null;
+  }, []);
+
+  useEffect(() => {
+    const el = getScrollEl();
+    if (!el) return;
+    const onScroll = () => { savedScrollTop = el.scrollTop; };
+    el.addEventListener('scroll', onScroll);
+    return () => el.removeEventListener('scroll', onScroll);
+  }, [getScrollEl]);
+
+  useEffect(() => {
+    const el = getScrollEl();
+    if (el) requestAnimationFrame(() => { el.scrollTop = savedScrollTop; });
+  }, [pathname, getScrollEl]);
 
   return (
     <Flex direction="column" className={cx(styles.layout, classNames?.layout)}>
@@ -55,7 +75,7 @@ export function Layout({ children, config, tree, classNames }: ThemeLayoutProps)
         </Navbar.End>
       </Navbar>
       <Flex className={cx(styles.body, classNames?.body)}>
-        <Sidebar defaultOpen collapsible={false} className={cx(styles.sidebar, classNames?.sidebar)}>
+        <Sidebar ref={sidebarRef} defaultOpen collapsible={false} className={cx(styles.sidebar, classNames?.sidebar)}>
           <Sidebar.Main>
             {tree.children.map((item) => (
               <SidebarNode