toc as li

components/Nav/TableOfContent.vue

@@ -8,17 +8,16 @@ const props = defineProps<{
 </script>
 
 <template>
-  <template v-for="link in props.links">
-    <v-list-item
-      nav
-      :title="link.text"
-      :value="link.id"
-      :href="`#${link.id}`"
-      variant="plain"
-    >
-      <template v-if="link?.children?.length > 0 && link.depth <= 3">
-        <TableOfContent :links="link.children" />
-      </template>
-    </v-list-item>
-  </template>
+  <v-navigation-drawer id="app-toc" location="right" :border="0" permanent>
+    <template #prepend>
+      <div class="text-h6 font-weight-medium mt-4 mb-2 ms-4">Contents</div>
+    </template>
+    <ul class="px-2 py-2">
+      <NavTableOfContentItem :links="props.links" /></ul
+  ></v-navigation-drawer>
 </template>
+<style scoped>
+#app-toc ul {
+  list-style-type: none;
+}
+</style>

components/Nav/TableOfContentItem.vue

+<script setup lang="ts">
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
+console.log(theme);
+const route = useRoute();
+
+const props = defineProps<{
+  links: any;
+}>();
+</script>
+<template>
+  <template v-for="link in props.links">
+    <li
+      :title="link.text"
+      :value="link.id"
+      :class="[
+        `ps-${(link.depth - 1) * 3}`,
+        {
+          'text-primary': route.hash === `#${link.id}`,
+          'text-medium-emphasis': route.hash !== `#${link.id}`,
+        },
+      ]"
+      :style="{
+        'border-left':
+          route.hash === `#${link.id}`
+            ? `2px solid ${theme.current.value.colors.primary}`
+            : '2px solid #e5e5e5',
+      }"
+    >
+      <NuxtLink
+        :to="`#${link.id}`"
+        class="text-decoration-none"
+        style="color: inherit"
+        >{{ link.text }}</NuxtLink
+      >
+    </li>
+    <template v-if="link?.children?.length > 0">
+      <NavTableOfContentItem :links="link.children" />
+    </template>
+  </template>
+</template>
+<style scoped>
+li {
+  border-left: 2px solid #e5e5e5;
+}
+</style>

content/2.defense-systems/1.PARIS.md

@@ -34,6 +34,7 @@ Paris type I system in _Salmonella enterica_ (GCF\__000006945.2). AriA_I:_ NP_46
 
 <br/>
 
+
 Paris type I merge system in _Sideroxydans lithotrophicus_ (GCF\__000025705.1). AriAB_I:_ WP_013030315.1
 
 ### Paris type II

layouts/article.vue

@@ -2,9 +2,8 @@
   <v-card>
     <v-app>
       <NavNavbar />
-      <v-navigation-drawer location="right" permanent>
-        <v-list> <NavTableOfContent :links="page.body.toc.links" /> </v-list
-      ></v-navigation-drawer>
+
+      <NavTableOfContent :links="page.body.toc.links" />
       <v-main style="min-height: 300px">
         <v-container class="px-8">
           <slot />

nuxt.config.ts

@@ -10,6 +10,7 @@ export default defineNuxtConfig({
     },
     moduleOptions: {
       treeshaking: true,
+      // styles: "sass"
 
     },
   }