Scope sidebars to the active site section

site/quartz.layout.ts

@@ -2,6 +2,49 @@ import { PageLayout, SharedLayout } from "./quartz/cfg"
 import * as Component from "./quartz/components"
 import DelveholdMasthead from "./quartz/components/DelveholdMasthead"
 
+const documentationExplorer = Component.ConditionalRender({
+  component: Component.DesktopOnly(
+    Component.Explorer({
+      title: "Documentation",
+      folderDefaultState: "open",
+      folderClickBehavior: "link",
+      useSavedState: false,
+      filterFn: (node) => node.slug.startsWith("Documentation"),
+    }),
+  ),
+  condition: (page) =>
+    page.fileData.slug === "Documentation" || page.fileData.slug?.startsWith("Documentation/"),
+})
+
+const gameDesignExplorer = Component.ConditionalRender({
+  component: Component.DesktopOnly(
+    Component.Explorer({
+      title: "Game Design",
+      folderDefaultState: "open",
+      folderClickBehavior: "link",
+      useSavedState: false,
+      filterFn: (node) => node.slug.startsWith("Game-Design"),
+    }),
+  ),
+  condition: (page) =>
+    page.fileData.slug === "Game-Design" || page.fileData.slug?.startsWith("Game-Design/"),
+})
+
+const loreExplorer = Component.ConditionalRender({
+  component: Component.DesktopOnly(
+    Component.Explorer({
+      title: "Lore",
+      folderDefaultState: "open",
+      folderClickBehavior: "link",
+      useSavedState: false,
+      filterFn: (node) => node.slug.startsWith("Lore"),
+    }),
+  ),
+  condition: (page) => page.fileData.slug === "Lore" || page.fileData.slug?.startsWith("Lore/"),
+})
+
+const sectionExplorers = [documentationExplorer, gameDesignExplorer, loreExplorer]
+
 export const sharedPageComponents: SharedLayout = {
   head: Component.Head(),
   header: [DelveholdMasthead()],
@@ -29,12 +72,7 @@ export const defaultContentPageLayout: PageLayout = {
       condition: (page) => page.fileData.slug !== "index",
     }),
   ],
-  left: [
-    Component.ConditionalRender({
-      component: Component.DesktopOnly(Component.Explorer()),
-      condition: (page) => page.fileData.slug !== "index",
-    }),
-  ],
+  left: sectionExplorers,
   right: [
     Component.ConditionalRender({
       component: Component.DesktopOnly(Component.TableOfContents()),
@@ -49,6 +87,6 @@ export const defaultContentPageLayout: PageLayout = {
 
 export const defaultListPageLayout: PageLayout = {
   beforeBody: [Component.Breadcrumbs({ rootName: "DELVE/HOLD" }), Component.ArticleTitle(), Component.ContentMeta()],
-  left: [Component.DesktopOnly(Component.Explorer())],
+  left: sectionExplorers,
   right: [],
 }