[codex] Split sidebar layout modules

AGENTS.md

@@ -19,7 +19,7 @@ src/              → Core ReScript source code
   common/         → Shared utilities, hooks, helpers (non-component modules)
   components/     → Reusable React components
   ffi/            → Plain JS interop files (prefer %raw over adding new files here)
-  layouts/        → Page layout components (DocsLayout, SidebarLayout, etc.)
+  layouts/        → Page layout components (DocsLayout, SidebarPageLayout, SidebarNav, etc.)
 markdown-pages/   → MDX content (blog posts, docs, community pages, syntax-lookup)
 data/             → Hand-curated data (API docs JSON, sidebar ordering)
 styles/           → CSS files (Tailwind v4 config in main.css, custom utilities)

__tests__/ApiOverviewLayout_.test.res

@@ -1,7 +1,7 @@
 open ReactRouter
 open Vitest
 
-let categories: array<SidebarLayout.Sidebar.Category.t> = [
+let categories: array<SidebarNav.Category.t> = [
   {
     name: "Overview",
     items: [

__tests__/Breadcrumbs_.test.res

@@ -0,0 +1,58 @@
+open ReactRouter
+open Vitest
+
+let mockBreadcrumbs: list<Url.breadcrumb> = list{
+  {Url.name: "Docs", href: "/docs/"},
+  {Url.name: "Language Manual", href: "/docs/manual/introduction"},
+}
+
+test("breadcrumbs render path segments", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="breadcrumbs-wrapper">
+        <Breadcrumbs crumbs=mockBreadcrumbs />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let docs = await screen->getByText("Docs")
+  await element(docs)->toBeVisible
+
+  let languageManual = await screen->getByText("Language Manual")
+  await element(languageManual)->toBeVisible
+
+  let wrapper = await screen->getByTestId("breadcrumbs-wrapper")
+  await element(wrapper)->toMatchScreenshot("sidebar-breadcrumbs")
+})
+
+test("breadcrumbs with deep path", async () => {
+  await viewport(1440, 900)
+
+  let deepBreadcrumbs: list<Url.breadcrumb> = list{
+    {Url.name: "Docs", href: "/docs/"},
+    {Url.name: "Language Manual", href: "/docs/manual/introduction"},
+    {Url.name: "Advanced", href: "/docs/manual/advanced"},
+  }
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="breadcrumbs-wrapper">
+        <Breadcrumbs crumbs=deepBreadcrumbs />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let docs = await screen->getByText("Docs")
+  await element(docs)->toBeVisible
+
+  let languageManual = await screen->getByText("Language Manual")
+  await element(languageManual)->toBeVisible
+
+  let advanced = await screen->getByText("Advanced")
+  await element(advanced)->toBeVisible
+
+  let wrapper = await screen->getByTestId("breadcrumbs-wrapper")
+  await element(wrapper)->toMatchScreenshot("sidebar-breadcrumbs-deep")
+})

__tests__/CommunityLayout_.test.res

@@ -1,7 +1,7 @@
 open ReactRouter
 open Vitest
 
-let mockCategories: array<SidebarLayout.Sidebar.Category.t> = [
+let mockCategories: array<SidebarNav.Category.t> = [
   {
     name: "Resources",
     items: [
@@ -66,7 +66,7 @@ test("mobile community layout hides sidebar", async () => {
   await element(wrapper)->toMatchScreenshot("mobile-community-layout")
 })
 
-let mockMultipleCategories: array<SidebarLayout.Sidebar.Category.t> = [
+let mockMultipleCategories: array<SidebarNav.Category.t> = [
   {
     name: "Resources",
     items: [

__tests__/DocsLayout_.test.res

@@ -1,7 +1,7 @@
 open ReactRouter
 open Vitest
 
-let mockCategories: array<SidebarLayout.Sidebar.Category.t> = [
+let mockCategories: array<SidebarNav.Category.t> = [
   {
     name: "Overview",
     items: [

__tests__/SidebarLayout_.test.res → __tests__/SidebarNav_.test.res

@@ -1,7 +1,7 @@
 open ReactRouter
 open Vitest
 
-let mockCategory: SidebarLayout.Sidebar.Category.t = {
+let mockCategory: SidebarNav.Category.t = {
   name: "Overview",
   items: [
     {name: "Introduction", href: "/docs/manual/introduction"},
@@ -10,18 +10,13 @@ let mockCategory: SidebarLayout.Sidebar.Category.t = {
   ],
 }
 
-let mockBreadcrumbs: list<Url.breadcrumb> = list{
-  {Url.name: "Docs", href: "/docs/"},
-  {Url.name: "Language Manual", href: "/docs/manual/introduction"},
-}
-
 test("sidebar category renders title and nav items", async () => {
   await viewport(1440, 900)
 
   let screen = await render(
     <BrowserRouter>
       <div dataTestId="category-wrapper">
-        <SidebarLayout.Sidebar.Category category=mockCategory onClick={_ => ()} />
+        <SidebarNav.Category category=mockCategory onClick={_ => ()} />
       </div>
     </BrowserRouter>,
   )
@@ -45,7 +40,7 @@ test("sidebar category highlights active item", async () => {
   let screen = await render(
     <BrowserRouter>
       <div dataTestId="category-wrapper">
-        <SidebarLayout.Sidebar.Category
+        <SidebarNav.Category
           category=mockCategory
           isItemActive={item => item.href == "/docs/manual/introduction"}
           onClick={_ => ()}
@@ -61,27 +56,6 @@ test("sidebar category highlights active item", async () => {
   await element(wrapper)->toMatchScreenshot("sidebar-category-active-item")
 })
 
-test("breadcrumbs render path segments", async () => {
-  await viewport(1440, 900)
-
-  let screen = await render(
-    <BrowserRouter>
-      <div dataTestId="breadcrumbs-wrapper">
-        <SidebarLayout.BreadCrumbs crumbs=mockBreadcrumbs />
-      </div>
-    </BrowserRouter>,
-  )
-
-  let docs = await screen->getByText("Docs")
-  await element(docs)->toBeVisible
-
-  let languageManual = await screen->getByText("Language Manual")
-  await element(languageManual)->toBeVisible
-
-  let wrapper = await screen->getByTestId("breadcrumbs-wrapper")
-  await element(wrapper)->toMatchScreenshot("sidebar-breadcrumbs")
-})
-
 let mockTocEntries: TableOfContents.t = {
   title: "Introduction",
   entries: [
@@ -97,7 +71,7 @@ test("sidebar category with active TOC renders entries", async () => {
   let screen = await render(
     <MemoryRouter initialEntries=["/docs/manual/introduction"]>
       <div dataTestId="toc-wrapper">
-        <SidebarLayout.Sidebar.Category
+        <SidebarNav.Category
           category=mockCategory
           isItemActive={item => item.href == "/docs/manual/introduction"}
           getActiveToc={item =>
@@ -128,7 +102,7 @@ test("sidebar category with active TOC renders entries", async () => {
 test("sidebar category with many items", async () => {
   await viewport(1440, 900)
 
-  let largeCategory: SidebarLayout.Sidebar.Category.t = {
+  let largeCategory: SidebarNav.Category.t = {
     name: "All Types",
     items: [
       {name: "String", href: "/docs/manual/string"},
@@ -145,7 +119,7 @@ test("sidebar category with many items", async () => {
   let screen = await render(
     <BrowserRouter>
       <div dataTestId="category-wrapper">
-        <SidebarLayout.Sidebar.Category category=largeCategory onClick={_ => ()} />
+        <SidebarNav.Category category=largeCategory onClick={_ => ()} />
       </div>
     </BrowserRouter>,
   )
@@ -159,33 +133,3 @@ test("sidebar category with many items", async () => {
   let wrapper = await screen->getByTestId("category-wrapper")
   await element(wrapper)->toMatchScreenshot("sidebar-category-many-items")
 })
-
-test("breadcrumbs with deep path", async () => {
-  await viewport(1440, 900)
-
-  let deepBreadcrumbs: list<Url.breadcrumb> = list{
-    {Url.name: "Docs", href: "/docs/"},
-    {Url.name: "Language Manual", href: "/docs/manual/introduction"},
-    {Url.name: "Advanced", href: "/docs/manual/advanced"},
-  }
-
-  let screen = await render(
-    <BrowserRouter>
-      <div dataTestId="breadcrumbs-wrapper">
-        <SidebarLayout.BreadCrumbs crumbs=deepBreadcrumbs />
-      </div>
-    </BrowserRouter>,
-  )
-
-  let docs = await screen->getByText("Docs")
-  await element(docs)->toBeVisible
-
-  let languageManual = await screen->getByText("Language Manual")
-  await element(languageManual)->toBeVisible
-
-  let advanced = await screen->getByText("Advanced")
-  await element(advanced)->toBeVisible
-
-  let wrapper = await screen->getByTestId("breadcrumbs-wrapper")
-  await element(wrapper)->toMatchScreenshot("sidebar-breadcrumbs-deep")
-})

app/routes/ApiDocs.res

@@ -333,7 +333,7 @@ let make = (props: props) => {
     }
   }
 
-  <SidebarLayout theme=#Reason sidebar rightSidebar> children </SidebarLayout>
+  <SidebarPageLayout theme=#Reason sidebar rightSidebar> children </SidebarPageLayout>
 }
 
 module Data = {

app/routes/ApiOverviewRoute.res

@@ -1,4 +1,4 @@
-let categories: array<SidebarLayout.Sidebar.Category.t> = [
+let categories: array<SidebarNav.Category.t> = [
   {
     name: "Overview",
     items: [
@@ -54,7 +54,7 @@ let default = () => {
   <>
     <Meta title description />
     <NavbarTertiary sidebar={<DocsSidebar categories />}>
-      <SidebarLayout.BreadCrumbs crumbs=breadcrumbs />
+      <Breadcrumbs crumbs=breadcrumbs />
     </NavbarTertiary>
     <DocsLayout categories theme=#Js>
       <div className="markdown-body">

app/routes/ApiOverviewRoute.resi

@@ -1,4 +1,4 @@
-let categories: array<SidebarLayout.Sidebar.Category.t>
+let categories: array<SidebarNav.Category.t>
 
 type loaderData = {
   compiledMdx: CompiledMdx.t,

app/routes/ApiRoute.res

@@ -208,7 +208,7 @@ let default = () => {
   <>
     <Meta title description=?docstrings />
     <NavbarTertiary sidebar=sidebarContent>
-      <SidebarLayout.BreadCrumbs crumbs=breadcrumbs />
+      <Breadcrumbs crumbs=breadcrumbs />
     </NavbarTertiary>
     <ApiDocs {...loaderData} />
   </>

app/routes/CommunityRoute.res

@@ -4,7 +4,7 @@ type loaderData = {
   title: string,
   description: string,
   filePath: string,
-  categories: array<SidebarLayout.Sidebar.Category.t>,
+  categories: array<SidebarNav.Category.t>,
 }
 
 let communityTableOfContents = async () => {

app/routes/CommunityRoute.resi

@@ -4,7 +4,7 @@ type loaderData = {
   title: string,
   description: string,
   filePath: string,
-  categories: array<SidebarLayout.Sidebar.Category.t>,
+  categories: array<SidebarNav.Category.t>,
 }
 
 let loader: ReactRouter.Loader.t<loaderData>

app/routes/DocsGuidelinesRoute.res

@@ -38,7 +38,7 @@ let default = () => {
 
   let editHref = `https://github.com/rescript-lang/rescript-lang.org/blob/master/${filePath}`
 
-  let categories: array<SidebarLayout.Sidebar.Category.t> = []
+  let categories: array<SidebarNav.Category.t> = []
 
   <>
     <Meta title description />

app/routes/DocsManualRoute.res

@@ -1,6 +1,6 @@
 type loaderData = {
   compiledMdx: CompiledMdx.t,
-  categories: array<SidebarLayout.Sidebar.Category.t>,
+  categories: array<SidebarNav.Category.t>,
   entries: array<TableOfContents.entry>,
   title: string,
   description: string,
@@ -78,7 +78,7 @@ let default = () => {
   <>
     <Meta title description />
     <NavbarTertiary sidebar={<DocsSidebar categories activeToc />}>
-      <SidebarLayout.BreadCrumbs crumbs=breadcrumbs />
+      <Breadcrumbs crumbs=breadcrumbs />
       <a
         href=editHref className="inline text-14 hover:underline text-fire" rel="noopener noreferrer"
       >

app/routes/DocsManualRoute.resi

@@ -1,6 +1,6 @@
 type loaderData = {
   compiledMdx: CompiledMdx.t,
-  categories: array<SidebarLayout.Sidebar.Category.t>,
+  categories: array<SidebarNav.Category.t>,
   entries: array<TableOfContents.entry>,
   title: string,
   description: string,

app/routes/DocsReactRoute.res

@@ -1,6 +1,6 @@
 type loaderData = {
   compiledMdx: CompiledMdx.t,
-  categories: array<SidebarLayout.Sidebar.Category.t>,
+  categories: array<SidebarNav.Category.t>,
   entries: array<TableOfContents.entry>,
   title: string,
   description: string,
@@ -71,7 +71,7 @@ let default = () => {
   <>
     <Meta title description />
     <NavbarTertiary sidebar={<DocsSidebar categories activeToc />}>
-      <SidebarLayout.BreadCrumbs crumbs=breadcrumbs />
+      <Breadcrumbs crumbs=breadcrumbs />
       <a
         href=editHref className="inline text-14 hover:underline text-fire" rel="noopener noreferrer"
       >

app/routes/DocsReactRoute.resi

@@ -1,6 +1,6 @@
 type loaderData = {
   compiledMdx: CompiledMdx.t,
-  categories: array<SidebarLayout.Sidebar.Category.t>,
+  categories: array<SidebarNav.Category.t>,
   entries: array<TableOfContents.entry>,
   title: string,
   description: string,

src/common/Url.resi

@@ -11,7 +11,7 @@ type t = {
   pagepath: array<string>,
 }
 
-// Moved here from original SidebarLayout.UrlPath
+// Moved here from the original sidebar URL helper.
 type breadcrumb = {
   name: string,
   href: string,

src/components/DocsSidebar.res

@@ -1,8 +1,5 @@
 @react.component
-let make = (
-  ~categories: array<SidebarLayout.Sidebar.Category.t>,
-  ~activeToc: option<TableOfContents.t>=?,
-) => {
+let make = (~categories: array<SidebarNav.Category.t>, ~activeToc: option<TableOfContents.t>=?) => {
   let {pathname} = ReactRouter.useLocation()
   let currentRoute = (pathname :> string)->Url.normalizePath
 
@@ -18,16 +15,16 @@ let make = (
     <div className="mb-56">
       {categories
       ->Array.map(category => {
-        let isItemActive = (navItem: SidebarLayout.Sidebar.NavItem.t) =>
+        let isItemActive = (navItem: SidebarNav.NavItem.t) =>
           navItem.href->Url.normalizePath === currentRoute
-        let getActiveToc = (navItem: SidebarLayout.Sidebar.NavItem.t) =>
+        let getActiveToc = (navItem: SidebarNav.NavItem.t) =>
           if navItem.href->Url.normalizePath === currentRoute {
             activeToc
           } else {
             None
           }
         <div key=category.name>
-          <SidebarLayout.Sidebar.Category
+          <SidebarNav.Category
             isItemActive
             getActiveToc
             category