✨ Docs page

components/docs/TableOfContentLink.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-list-item :active="route.hash.replace('#', '') == link.id" :to="{ hash: '#'+link.id }">
+    <template #prepend>
+      <v-icon icon="mdi-menu-right" :style="`padding-left: ${props.padding ?? 0}rem`" />
+    </template>
+    {{ link.text }}
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ link: any, padding?: number }>()
+
+const route = useRoute()
+</script>

components/docs/TableOfContentLinks.vue

@@ -0,0 +1,11 @@
+<template>
+  <template v-for="link in links">
+    <docs-table-of-content-link :link="link" :padding="props.padding" />
+
+    <table-of-content-links v-if="link.children" :links="link.children" :padding="(props.padding ?? 0) + 2" />
+  </template>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ links: any[], padding?: number }>()
+</script>

components/docs/TableOfContents.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-list density="compact" nav color="primary">
+    <template v-for="link in links">
+      <docs-table-of-content-link :link="link" :padding="props.padding" />
+
+      <docs-table-of-content-links v-if="link.children" :links="link.children" :padding="(props.padding ?? 0) + 2" />
+    </template>
+  </v-list>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ links: any[], padding?: number }>()
+</script>