@farming-labs/nuxt-theme 0.0.2-beta.20 → 0.0.2-beta.22

package/package.json

@@ -1,7 +1,20 @@
 {
   "name": "@farming-labs/nuxt-theme",
-  "version": "0.0.2-beta.20",
+  "version": "0.0.2-beta.22",
   "description": "Nuxt/Vue UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
+  "keywords": [
+    "docs",
+    "documentation",
+    "nuxt",
+    "theme",
+    "vue"
+  ],
+  "license": "MIT",
+  "author": "Farming Labs",
+  "files": [
+    "src",
+    "styles"
+  ],
   "type": "module",
   "exports": {
     ".": {
@@ -38,26 +51,13 @@
     "./styles/colorful.css": "./styles/colorful.css",
     "./colorful/css": "./styles/colorful-bundle.css"
   },
-  "files": [
-    "src",
-    "styles"
-  ],
-  "keywords": [
-    "docs",
-    "nuxt",
-    "vue",
-    "theme",
-    "documentation"
-  ],
-  "author": "Farming Labs",
-  "license": "MIT",
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.2-beta.20"
+    "@farming-labs/docs": "0.0.2-beta.22"
   },
   "peerDependencies": {
-    "vue": ">=3.0.0",
-    "nuxt": ">=3.0.0"
+    "nuxt": ">=3.0.0",
+    "vue": ">=3.0.0"
   },
   "peerDependenciesMeta": {
     "nuxt": {

package/src/components/Breadcrumb.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-const props = withDefaults(
-  defineProps<{ pathname?: string; entry?: string }>(),
-  { pathname: "", entry: "docs" }
-);
+const props = withDefaults(defineProps<{ pathname?: string; entry?: string }>(), {
+  pathname: "",
+  entry: "docs",
+});
 
 const segments = computed(() => {
   return props.pathname.split("/").filter(Boolean);

package/src/components/DocsContent.vue

@@ -18,16 +18,12 @@ const props = defineProps<{
 const titleSuffix = computed(() =>
   props.config?.metadata?.titleTemplate
     ? String(props.config.metadata.titleTemplate).replace("%s", "")
-    : " – Docs"
+    : " – Docs",
 );
 
-const tocEnabled = computed(
-  () => (props.config?.theme as any)?.ui?.layout?.toc?.enabled ?? true
-);
+const tocEnabled = computed(() => (props.config?.theme as any)?.ui?.layout?.toc?.enabled ?? true);
 
-const tocStyle = computed(
-  () => (props.config?.theme as any)?.ui?.layout?.toc?.style ?? "default"
-);
+const tocStyle = computed(() => (props.config?.theme as any)?.ui?.layout?.toc?.style ?? "default");
 
 const breadcrumbEnabled = computed(() => {
   const bc = props.config?.breadcrumb;
@@ -37,26 +33,19 @@ const breadcrumbEnabled = computed(() => {
   return true;
 });
 
-const showEditOnGithub = computed(
-  () => !!props.config?.github && !!props.data.editOnGithub
-);
+const showEditOnGithub = computed(() => !!props.config?.github && !!props.data.editOnGithub);
 const showLastModified = computed(() => !!props.data.lastModified);
 
 const entry = computed(() => (props.config?.entry as string) ?? "docs");
 
 const metaDescription = computed(
-  () =>
-    props.data.description ??
-    (props.config?.metadata as any)?.description ??
-    undefined
+  () => props.data.description ?? (props.config?.metadata as any)?.description ?? undefined,
 );
 
 useHead({
   title: () => `${props.data.title}${titleSuffix.value}`,
   meta: () =>
-    metaDescription.value
-      ? [{ name: "description", content: metaDescription.value }]
-      : [],
+    metaDescription.value ? [{ name: "description", content: metaDescription.value }] : [],
 });
 </script>
 

package/src/components/DocsLayout.vue

@@ -21,17 +21,13 @@ const props = withDefaults(
     titleUrl?: string;
     triggerComponent?: object | null;
   }>(),
-  { config: null, title: undefined, titleUrl: undefined, triggerComponent: null }
+  { config: null, title: undefined, titleUrl: undefined, triggerComponent: null },
 );
 
 const route = useRoute();
 
-const resolvedTitle = computed(
-  () => props.title ?? props.config?.nav?.title ?? "Docs"
-);
-const resolvedTitleUrl = computed(
-  () => props.titleUrl ?? props.config?.nav?.url ?? "/docs"
-);
+const resolvedTitle = computed(() => props.title ?? props.config?.nav?.title ?? "Docs");
+const resolvedTitleUrl = computed(() => props.titleUrl ?? props.config?.nav?.url ?? "/docs");
 
 const showThemeToggle = computed(() => {
   const toggle = props.config?.themeToggle;
@@ -62,7 +58,9 @@ const themeInitScript = computed(() => {
     return `document.documentElement.classList.remove('light','dark');document.documentElement.classList.add('${forcedTheme.value}')`;
   }
   const def = defaultTheme.value;
-  const fallback = def ? `'${def}'` : `(window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light')`;
+  const fallback = def
+    ? `'${def}'`
+    : `(window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light')`;
   return [
     "(function(){",
     "var m=document.cookie.match(/(?:^|;\\s*)theme=(\\w+)/);",
@@ -142,25 +140,26 @@ function buildLayoutCSS(layout: Record<string, any> | undefined): string {
   if (rootVars.length === 0 && desktopVars.length === 0) return "";
   const parts: string[] = [];
   if (rootVars.length > 0) parts.push(`:root {\n  ${rootVars.join("\n  ")}\n}`);
-  if (desktopVars.length > 0) parts.push(`@media (min-width: 1024px) {\n  :root {\n    ${desktopVars.join("\n    ")}\n  }\n}`);
+  if (desktopVars.length > 0)
+    parts.push(
+      `@media (min-width: 1024px) {\n  :root {\n    ${desktopVars.join("\n    ")}\n  }\n}`,
+    );
   return parts.join("\n");
 }
 
 const overrideCSS = computed(() => {
-  const colorOverrides = (props.config?.theme as any)?._userColorOverrides
-    ?? (props.config?.theme as any)?.ui?.colors;
+  const colorOverrides =
+    (props.config?.theme as any)?._userColorOverrides ?? (props.config?.theme as any)?.ui?.colors;
   const typography = (props.config?.theme as any)?.ui?.typography;
   const layout = (props.config?.theme as any)?.ui?.layout;
-  return [buildColorsCSS(colorOverrides), buildTypographyCSS(typography), buildLayoutCSS(layout)].filter(Boolean).join("\n");
+  return [buildColorsCSS(colorOverrides), buildTypographyCSS(typography), buildLayoutCSS(layout)]
+    .filter(Boolean)
+    .join("\n");
 });
 
 useHead(() => ({
-  script: [
-    { innerHTML: themeInitScript.value, tagPosition: "head" },
-  ],
-  style: overrideCSS.value
-    ? [{ innerHTML: overrideCSS.value }]
-    : [],
+  script: [{ innerHTML: themeInitScript.value, tagPosition: "head" }],
+  style: overrideCSS.value ? [{ innerHTML: overrideCSS.value }] : [],
 }));
 
 // ─── Sidebar / search / keyboard ─────────────────────────────
@@ -189,12 +188,16 @@ function isActive(url: string) {
 
 const ICON_MAP: Record<string, string> = {
   book: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>',
-  terminal: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>',
+  terminal:
+    '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>',
   code: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>',
   file: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>',
-  folder: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>',
-  rocket: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg>',
-  settings: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
+  folder:
+    '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>',
+  rocket:
+    '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg>',
+  settings:
+    '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
 };
 
 function getIcon(iconKey?: string) {
@@ -214,156 +217,231 @@ function handleKeydown(e: KeyboardEvent) {
 }
 
 const showFloatingAI = computed(
-  () =>
-    props.config?.ai?.enabled &&
-    props.config?.ai?.mode === "floating"
+  () => props.config?.ai?.enabled && props.config?.ai?.mode === "floating",
 );
 </script>
 
 <template>
   <div class="fd-layout-root">
-  <div class="fd-layout" @keydown="handleKeydown">
-    <header class="fd-header">
-      <button class="fd-menu-btn" type="button" aria-label="Toggle sidebar" @click="toggleSidebar">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <line x1="3" y1="6" x2="21" y2="6" />
-          <line x1="3" y1="12" x2="21" y2="12" />
-          <line x1="3" y1="18" x2="21" y2="18" />
-        </svg>
-      </button>
-      <NuxtLink :to="resolvedTitleUrl" class="fd-header-title">{{ resolvedTitle }}</NuxtLink>
-      <button class="fd-search-trigger-mobile" type="button" aria-label="Search" @click="openSearch">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <circle cx="11" cy="11" r="8" />
-          <line x1="21" y1="21" x2="16.65" y2="16.65" />
-        </svg>
-      </button>
-    </header>
-
-    <div v-if="sidebarOpen" class="fd-sidebar-overlay" aria-hidden="true" @click="closeSidebar" />
-
-    <aside class="fd-sidebar" :class="{ 'fd-sidebar-open': sidebarOpen }">
-      <div class="fd-sidebar-header">
-        <NuxtLink :to="resolvedTitleUrl" class="fd-sidebar-title" @click="closeSidebar">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
-            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+    <div class="fd-layout" @keydown="handleKeydown">
+      <header class="fd-header">
+        <button
+          class="fd-menu-btn"
+          type="button"
+          aria-label="Toggle sidebar"
+          @click="toggleSidebar"
+        >
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <line x1="3" y1="6" x2="21" y2="6" />
+            <line x1="3" y1="12" x2="21" y2="12" />
+            <line x1="3" y1="18" x2="21" y2="18" />
           </svg>
-          {{ resolvedTitle }}
-        </NuxtLink>
-      </div>
-
-      <div class="fd-sidebar-search">
-        <button type="button" class="fd-sidebar-search-btn" @click="openSearch">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        </button>
+        <NuxtLink :to="resolvedTitleUrl" class="fd-header-title">{{ resolvedTitle }}</NuxtLink>
+        <button
+          class="fd-search-trigger-mobile"
+          type="button"
+          aria-label="Search"
+          @click="openSearch"
+        >
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
             <circle cx="11" cy="11" r="8" />
             <line x1="21" y1="21" x2="16.65" y2="16.65" />
           </svg>
-          <span>Search</span>
-          <kbd>⌘</kbd><kbd>K</kbd>
         </button>
-      </div>
+      </header>
+
+      <div v-if="sidebarOpen" class="fd-sidebar-overlay" aria-hidden="true" @click="closeSidebar" />
 
-      <nav class="fd-sidebar-nav">
-        <template v-if="tree?.children">
-          <template v-for="(node, i) in tree.children" :key="node.name + (node.url ?? '')">
-            <NuxtLink
-              v-if="node.type === 'page'"
-              :to="node.url!"
-              class="fd-sidebar-link fd-sidebar-top-link"
-              :class="{ 'fd-sidebar-link-active': isActive(node.url ?? ''), 'fd-sidebar-first-item': i === 0 }"
-              @click="closeSidebar"
+      <aside class="fd-sidebar" :class="{ 'fd-sidebar-open': sidebarOpen }">
+        <div class="fd-sidebar-header">
+          <NuxtLink :to="resolvedTitleUrl" class="fd-sidebar-title" @click="closeSidebar">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
             >
-              <span v-if="getIcon(node.icon)" class="fd-sidebar-icon" v-html="getIcon(node.icon)" />
-              {{ node.name }}
-            </NuxtLink>
-            <details v-else-if="node.type === 'folder'" class="fd-sidebar-folder" :class="{ 'fd-sidebar-first-item': i === 0 }" open>
-              <summary class="fd-sidebar-folder-trigger">
-                <span class="fd-sidebar-folder-label">
-                  <span v-if="getIcon(node.icon)" class="fd-sidebar-icon" v-html="getIcon(node.icon)" />
-                  {{ node.name }}
-                </span>
-                <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
-              </summary>
-              <div class="fd-sidebar-folder-content">
-                <NuxtLink
-                  v-if="node.index"
-                  :to="node.index.url"
-                  class="fd-sidebar-link fd-sidebar-child-link"
-                  :class="{ 'fd-sidebar-link-active': isActive(node.index.url) }"
-                  @click="closeSidebar"
-                >
-                  {{ node.index.name }}
-                </NuxtLink>
-                <template v-for="child in node.children" :key="child.name + ((child as any).url ?? '')">
+              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+              <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+            </svg>
+            {{ resolvedTitle }}
+          </NuxtLink>
+        </div>
+
+        <div class="fd-sidebar-search">
+          <button type="button" class="fd-sidebar-search-btn" @click="openSearch">
+            <svg
+              width="15"
+              height="15"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+            <span>Search</span>
+            <kbd>⌘</kbd><kbd>K</kbd>
+          </button>
+        </div>
+
+        <nav class="fd-sidebar-nav">
+          <template v-if="tree?.children">
+            <template v-for="(node, i) in tree.children" :key="node.name + (node.url ?? '')">
+              <NuxtLink
+                v-if="node.type === 'page'"
+                :to="node.url!"
+                class="fd-sidebar-link fd-sidebar-top-link"
+                :class="{
+                  'fd-sidebar-link-active': isActive(node.url ?? ''),
+                  'fd-sidebar-first-item': i === 0,
+                }"
+                @click="closeSidebar"
+              >
+                <span
+                  v-if="getIcon(node.icon)"
+                  class="fd-sidebar-icon"
+                  v-html="getIcon(node.icon)"
+                />
+                {{ node.name }}
+              </NuxtLink>
+              <details
+                v-else-if="node.type === 'folder'"
+                class="fd-sidebar-folder"
+                :class="{ 'fd-sidebar-first-item': i === 0 }"
+                open
+              >
+                <summary class="fd-sidebar-folder-trigger">
+                  <span class="fd-sidebar-folder-label">
+                    <span
+                      v-if="getIcon(node.icon)"
+                      class="fd-sidebar-icon"
+                      v-html="getIcon(node.icon)"
+                    />
+                    {{ node.name }}
+                  </span>
+                  <svg
+                    class="fd-sidebar-chevron"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <polyline points="6 9 12 15 18 9" />
+                  </svg>
+                </summary>
+                <div class="fd-sidebar-folder-content">
                   <NuxtLink
-                    v-if="child.type === 'page'"
-                    :to="(child as any).url"
+                    v-if="node.index"
+                    :to="node.index.url"
                     class="fd-sidebar-link fd-sidebar-child-link"
-                    :class="{ 'fd-sidebar-link-active': isActive((child as any).url) }"
+                    :class="{ 'fd-sidebar-link-active': isActive(node.index.url) }"
                     @click="closeSidebar"
                   >
-                    {{ child.name }}
+                    {{ node.index.name }}
                   </NuxtLink>
-                  <details v-else-if="child.type === 'folder'" class="fd-sidebar-folder fd-sidebar-nested-folder" open>
-                    <summary class="fd-sidebar-folder-trigger">
-                      <span class="fd-sidebar-folder-label">{{ child.name }}</span>
-                      <svg class="fd-sidebar-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <polyline points="6 9 12 15 18 9" />
-                      </svg>
-                    </summary>
-                    <div class="fd-sidebar-folder-content">
-                      <NuxtLink
-                        v-if="(child as any).index"
-                        :to="(child as any).index.url"
-                        class="fd-sidebar-link fd-sidebar-child-link"
-                        :class="{ 'fd-sidebar-link-active': isActive((child as any).index.url) }"
-                        @click="closeSidebar"
-                      >
-                        {{ (child as any).index.name }}
-                      </NuxtLink>
-                      <NuxtLink
-                        v-for="grandchild in (child as any).children"
-                        v-if="grandchild.type === 'page'"
-                        :key="grandchild.url"
-                        :to="grandchild.url"
-                        class="fd-sidebar-link fd-sidebar-child-link"
-                        :class="{ 'fd-sidebar-link-active': isActive(grandchild.url) }"
-                        @click="closeSidebar"
-                      >
-                        {{ grandchild.name }}
-                      </NuxtLink>
-                    </div>
-                  </details>
-                </template>
-              </div>
-            </details>
+                  <template
+                    v-for="child in node.children"
+                    :key="child.name + ((child as any).url ?? '')"
+                  >
+                    <NuxtLink
+                      v-if="child.type === 'page'"
+                      :to="(child as any).url"
+                      class="fd-sidebar-link fd-sidebar-child-link"
+                      :class="{ 'fd-sidebar-link-active': isActive((child as any).url) }"
+                      @click="closeSidebar"
+                    >
+                      {{ child.name }}
+                    </NuxtLink>
+                    <details
+                      v-else-if="child.type === 'folder'"
+                      class="fd-sidebar-folder fd-sidebar-nested-folder"
+                      open
+                    >
+                      <summary class="fd-sidebar-folder-trigger">
+                        <span class="fd-sidebar-folder-label">{{ child.name }}</span>
+                        <svg
+                          class="fd-sidebar-chevron"
+                          width="14"
+                          height="14"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        >
+                          <polyline points="6 9 12 15 18 9" />
+                        </svg>
+                      </summary>
+                      <div class="fd-sidebar-folder-content">
+                        <NuxtLink
+                          v-if="(child as any).index"
+                          :to="(child as any).index.url"
+                          class="fd-sidebar-link fd-sidebar-child-link"
+                          :class="{ 'fd-sidebar-link-active': isActive((child as any).index.url) }"
+                          @click="closeSidebar"
+                        >
+                          {{ (child as any).index.name }}
+                        </NuxtLink>
+                        <NuxtLink
+                          v-for="grandchild in (child as any).children"
+                          v-if="grandchild.type === 'page'"
+                          :key="grandchild.url"
+                          :to="grandchild.url"
+                          class="fd-sidebar-link fd-sidebar-child-link"
+                          :class="{ 'fd-sidebar-link-active': isActive(grandchild.url) }"
+                          @click="closeSidebar"
+                        >
+                          {{ grandchild.name }}
+                        </NuxtLink>
+                      </div>
+                    </details>
+                  </template>
+                </div>
+              </details>
+            </template>
           </template>
-        </template>
-      </nav>
+        </nav>
 
-      <div v-if="showThemeToggle" class="fd-sidebar-footer">
-        <ThemeToggle />
-      </div>
-    </aside>
+        <div v-if="showThemeToggle" class="fd-sidebar-footer">
+          <ThemeToggle />
+        </div>
+      </aside>
 
-    <main class="fd-main">
-      <slot />
-    </main>
-  </div>
+      <main class="fd-main">
+        <slot />
+      </main>
+    </div>
 
-  <FloatingAIChat
-    v-if="showFloatingAI"
-    api="/api/docs"
-    :suggested-questions="config?.ai?.suggestedQuestions ?? []"
-    :ai-label="config?.ai?.aiLabel ?? 'AI'"
-    :position="config?.ai?.position ?? 'bottom-right'"
-    :floating-style="config?.ai?.floatingStyle ?? 'panel'"
-    :trigger-component="triggerComponent"
-  />
+    <FloatingAIChat
+      v-if="showFloatingAI"
+      api="/api/docs"
+      :suggested-questions="config?.ai?.suggestedQuestions ?? []"
+      :ai-label="config?.ai?.aiLabel ?? 'AI'"
+      :position="config?.ai?.position ?? 'bottom-right'"
+      :floating-style="config?.ai?.floatingStyle ?? 'panel'"
+      :trigger-component="triggerComponent"
+    />
 
-  <SearchDialog v-if="searchOpen" @close="closeSearch" />
+    <SearchDialog v-if="searchOpen" @close="closeSearch" />
   </div>
 </template>