From 755550915fa7860b4db860c9855c47f86cdb2e5d Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sat, 2 May 2026 14:38:15 +0800
Subject: [PATCH] chore(docs): indentation of nested sidebar

---
 docs/.vitepress/components/DocSidebar.vue     | 45 +------------
 docs/.vitepress/components/DocSidebarItem.vue | 64 +++++++++++++++++--
 docs/.vitepress/components/DocTopbar.vue      | 24 +------
 packages/i18n/src/locales/es/server/auth.yaml |  2 +-
 packages/i18n/src/locales/ru/settings.yaml    |  2 +-
 5 files changed, 67 insertions(+), 70 deletions(-)

diff --git a/docs/.vitepress/components/DocSidebar.vue b/docs/.vitepress/components/DocSidebar.vue
index 28c78eb53..77061fcbc 100644
--- a/docs/.vitepress/components/DocSidebar.vue
+++ b/docs/.vitepress/components/DocSidebar.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import type { DefaultTheme } from 'vitepress/theme'
 
-import { Icon } from '@iconify/vue'
-import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui'
-
 import DocSidebarItem from './DocSidebarItem.vue'
 
 defineProps<{
@@ -12,45 +9,9 @@ defineProps<{
 </script>
 
 <template>
-  <div
+  <DocSidebarItem
     v-for="item in items"
     :key="item.text"
-  >
-    <CollapsibleRoot
-      v-if="item.items?.length"
-      v-slot="{ open }"
-      class="mb-6"
-      :default-open="true"
-    >
-      <CollapsibleTrigger
-        :class="[
-          'group w-full inline-flex items-center justify-between py-1 pl-3 pr-3 text-sm font-bold',
-          'hover:bg-neutral/15 rounded-lg',
-        ]"
-      >
-        <span>{{ item.text }}</span>
-        <Icon
-          icon="lucide:chevron-down"
-          class="text-lg text-muted-foreground transition group-hover:text-foreground"
-          :class="{ '-rotate-90': !open }"
-        />
-      </CollapsibleTrigger>
-      <CollapsibleContent
-        :class="[
-          'overflow-hidden mt-0.5 data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown flex flex-col gap-1',
-        ]"
-      >
-        <DocSidebarItem
-          v-for="subitem in item.items"
-          :key="subitem.text"
-          :item="subitem"
-        />
-      </CollapsibleContent>
-    </CollapsibleRoot>
-
-    <DocSidebarItem
-      v-else
-      :item="item"
-    />
-  </div>
+    :item="item"
+  />
 </template>
diff --git a/docs/.vitepress/components/DocSidebarItem.vue b/docs/.vitepress/components/DocSidebarItem.vue
index 98d0881fb..2100d9791 100644
--- a/docs/.vitepress/components/DocSidebarItem.vue
+++ b/docs/.vitepress/components/DocSidebarItem.vue
@@ -1,17 +1,31 @@
 <script setup lang="ts">
 import type { SidebarItem } from '../composables/sidebar'
 
+import { Icon } from '@iconify/vue'
 import { useCurrentElement } from '@vueuse/core'
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui'
 import { computed, watch } from 'vue'
 
 import { useSidebarControl } from '../composables/sidebar'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   item: SidebarItem
-}>()
-const { isActiveLink } = useSidebarControl(computed(() => props.item))
+  depth?: number
+}>(), {
+  depth: 0,
+})
+const { collapsed, hasActiveLink, hasChildren, isActiveLink } = useSidebarControl(computed(() => props.item))
 
 const elRef = useCurrentElement()
+const isOpen = computed({
+  get: () => !collapsed.value,
+  set: (value: boolean) => collapsed.value = !value,
+})
+const contentStyle = computed(() => {
+  return {
+    paddingLeft: `${0.75 + props.depth * 0.875}rem`,
+  }
+})
 
 watch(isActiveLink, () => {
   if (isActiveLink.value && elRef.value instanceof HTMLElement) {
@@ -23,16 +37,56 @@ watch(isActiveLink, () => {
 </script>
 
 <template>
+  <CollapsibleRoot
+    v-if="hasChildren"
+    v-slot="{ open }"
+    v-model:open="isOpen"
+    class="w-full"
+  >
+    <CollapsibleTrigger
+      :class="[
+        'group w-full inline-flex items-center justify-between rounded-lg py-1 pr-3 text-sm transition-colors duration-150 ease-in-out mb-0.5',
+        hasActiveLink ? 'text-foreground' : 'text-muted-foreground',
+        'hover:bg-primary/10 hover:text-primary',
+      ]"
+    >
+      <span
+        :style="contentStyle"
+        class="min-w-0 flex-1 truncate text-left font-semibold"
+        v-html="item.text"
+      />
+      <Icon
+        icon="lucide:chevron-down"
+        class="ml-2 flex-none text-lg text-muted-foreground transition group-hover:text-foreground"
+        :class="{ '-rotate-90': !open }"
+      />
+    </CollapsibleTrigger>
+    <CollapsibleContent
+      :class="[
+        'overflow-hidden data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown flex flex-col gap-1',
+      ]"
+    >
+      <DocSidebarItem
+        v-for="subitem in item.items"
+        :key="subitem.text"
+        :item="subitem"
+        :depth="depth + 1"
+      />
+    </CollapsibleContent>
+  </CollapsibleRoot>
+
   <div
+    v-else
     :class="[
-      'flex items-center rounded-lg text-sm transition-colors duration-150 ease-in-out hover:bg-card',
+      'flex w-full items-center rounded-lg text-sm transition-colors duration-150 ease-in-out hover:bg-card',
       isActiveLink ? 'is-active !bg-primary/10 !text-primary font-semibold' : '',
       'hover:bg-primary/10 hover:text-primary',
     ]"
   >
     <a
       :href="item.link"
-      class="min-h-[2.15rem] w-full inline-flex items-center px-3 py-0.5"
+      :style="contentStyle"
+      class="min-h-[2.15rem] w-full inline-flex items-center py-0.5 pr-3"
       v-html="item.text"
     />
   </div>
diff --git a/docs/.vitepress/components/DocTopbar.vue b/docs/.vitepress/components/DocTopbar.vue
index 0b4f74e6f..14ba8cb44 100644
--- a/docs/.vitepress/components/DocTopbar.vue
+++ b/docs/.vitepress/components/DocTopbar.vue
@@ -129,29 +129,11 @@ watch(path, () => {
                   <span class="font-bold">{{ group.text }}</span>
                 </div>
 
-                <template
+                <DocSidebarItem
                   v-for="item in group.items"
                   :key="item.text"
-                >
-                  <ul
-                    v-if="item.items?.length"
-                    class="[&:not(:last-child)]:mb-6"
-                  >
-                    <div class="pb-2 pl-4 text-sm font-bold">
-                      {{ item.text }}
-                    </div>
-                    <DocSidebarItem
-                      v-for="subitem in item.items"
-                      :key="subitem.text"
-                      :item="subitem"
-                    />
-                  </ul>
-
-                  <DocSidebarItem
-                    v-else
-                    :item="item"
-                  />
-                </template>
+                  :item="item"
+                />
               </div>
               <div class="h-12 w-full" />
             </div>
diff --git a/packages/i18n/src/locales/es/server/auth.yaml b/packages/i18n/src/locales/es/server/auth.yaml
index f3014c2e8..5c1ddfe5a 100644
--- a/packages/i18n/src/locales/es/server/auth.yaml
+++ b/packages/i18n/src/locales/es/server/auth.yaml
@@ -66,7 +66,7 @@ signIn:
   footer:
     prefix: Al continuar, aceptas nuestros
     terms: Términos
-    and: "y"
+    and: 'y'
     privacy: Política de Privacidad
 verifyEmail:
   title:
diff --git a/packages/i18n/src/locales/ru/settings.yaml b/packages/i18n/src/locales/ru/settings.yaml
index 01d1be6a6..61492f1c8 100644
--- a/packages/i18n/src/locales/ru/settings.yaml
+++ b/packages/i18n/src/locales/ru/settings.yaml
@@ -827,7 +827,7 @@ pages:
         description: >-
           Провайдеры транскрипции (speech-to-text): Whisper.cpp, OpenAI, Azure Speech
       artistry:
-        title: Artistry 
+        title: Artistry
         description: Поставщики моделей генерации и создания изображений, например ComfyUI, Replicate.
         items:
           comfyui: