✨ Breadcrumb

layouts/docs.vue

@@ -61,6 +61,13 @@
   </v-navigation-drawer>
 
   <v-main>
+    <v-sheet color="grey-lighten-8" v-if="breadcrumb.length >= 1">
+      <div class="flex items-center justify-center h-[60px] px-5">
+        <v-breadcrumbs :items="breadcrumb" density="compact"></v-breadcrumbs>
+      </div>
+      <v-divider class="border-opacity-50" />
+    </v-sheet>
+
     <slot />
   </v-main>
 </template>
@@ -71,10 +78,19 @@ import Logo from "../assets/logo-w-shadow.png"
 const { locale } = useI18n()
 const route = useRoute()
 
+const breadcrumb = computed(() => {
+  const arr = route.path.replace(/^\/|\/$/g, "").split("/")
+  arr.shift()
+  return arr.map((x, idx) => ({
+    title: x,
+    to: `/docs/${arr.slice(0, idx+1).join("/")}`,
+  }))
+})
+
 const navNotRoot = computed(() => route.path.split("/").length > 2)
 const navQuery = computed(() => ({
   where: {
-    _path: new RegExp("^\\" + route.path + "\\/[^\\/]+\\/?$"),
+    _path: new RegExp("^\\/" + route.path.replace(/^\/|\/$/g, '') + "\\/[^\\/]+\\/?$"),
     _locale: getLocale(locale),
   },
 }))

pages/docs/[...slug].vue

@@ -17,12 +17,14 @@
         </article>
       </div>
 
-      <v-navigation-drawer app v-model="drawerOpen" floating location="right" width="320">
+      <v-navigation-drawer app v-model="drawerOpen" floating location="right" width="300">
-        <v-tabs v-model="drawerTab" hide-slider align-tabs="center">
+        <div class="h-[60px] flex justify-center items-center">
-          <v-tab :value="1">
+          <v-tabs v-model="drawerTab" hide-slider align-tabs="center">
-            <v-icon icon="mdi-table-of-contents" />
+            <v-tab :value="1">
-          </v-tab>
+              <v-icon icon="mdi-table-of-contents" />
-        </v-tabs>
+            </v-tab>
+          </v-tabs>
+        </div>
 
         <v-divider class="border-opacity-50 mb-1" />