refactor

components/Nav/Navbar.vue

+<template>
+  <v-app-bar>
+    <v-app-bar-nav-icon
+      variant="text"
+      @click.stop="drawer = !drawer"
+    ></v-app-bar-nav-icon>
+    <v-toolbar-title>Microbial Warefare</v-toolbar-title>
+    <v-btn @click="toggleTheme">toggle theme</v-btn>
+  </v-app-bar>
+  <v-navigation-drawer v-model="drawer">
+    <v-card flat>
+      <v-list>
+        <NavNavigation :navigation="navigation" />
+      </v-list>
+    </v-card>
+  </v-navigation-drawer>
+ 
+</template>
+<script setup lang="ts">
+import { useTheme } from "vuetify";
+const { navigation, page, surround, globals } = useContent();
+console.log(page.value);
+const theme = useTheme();
+
+function toggleTheme() {
+  theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
+}
+const drawer = ref(true);
+</script>

components/Navigation.vue → components/Nav/Navigation.vue

@@ -13,7 +13,6 @@ const props = defineProps<{
       <template v-slot:activator="{ props }">
         <v-list-item
           v-bind="props"
-          prepend-icon="mdi-account-circle"
           nav
           :title="navItem.title"
           active-color="primary"

components/TableOfContent.vue → components/Nav/TableOfContent.vue

 <script setup lang="ts">
 const props = defineProps<{
   links: any;
-  depth: {
-    type: number;
-    default: 2;
-  };
 }>();
 
 // const { navigation } = useContent();
@@ -20,7 +16,7 @@ const props = defineProps<{
       :href="`#${link.id}`"
       variant="plain"
     >
-      <template v-if="link?.children && links.depth <= props.depth">
+      <template v-if="link?.children?.length > 0 && link.depth <= 3">
         <TableOfContent :links="link.children" />
       </template>
     </v-list-item>

layouts/article.vue

 <template>
   <v-card>
     <v-app>
-      <v-app-bar>
-        <v-app-bar-nav-icon
-          variant="text"
-          @click.stop="drawer = !drawer"
-        ></v-app-bar-nav-icon>
-        <v-toolbar-title>Microbial Warefare</v-toolbar-title>
-      </v-app-bar>
-
-      <v-navigation-drawer v-model="drawer">
-        <v-card flat>
-          <v-list>
-            <Navigation :navigation="navigation" />
-          </v-list>
-        </v-card>
-      </v-navigation-drawer>
+      <NavNavbar />
       <v-navigation-drawer location="right" permanent>
-        <v-list> <TableOfContent :links="page.body.toc.links" /> </v-list
+        <v-list> <NavTableOfContent :links="page.body.toc.links" /> </v-list
       ></v-navigation-drawer>
       <v-main style="min-height: 300px">
-        <v-container>
+        <v-container class="px-8">
           <slot />
 
           <v-footer app>footer</v-footer>
@@ -31,7 +17,6 @@
 </template>
 <script setup lang="ts">
 const { navigation, page, surround, globals } = useContent();
-console.log(page.value);
 
-const drawer = ref(true);
+console.log("the toc", page.value);
 </script>

layouts/custom.vue

 <template>
   <v-card>
     <v-app>
-      <v-app-bar>
-        <v-app-bar-nav-icon
-          variant="text"
-          @click.stop="drawer = !drawer"
-        ></v-app-bar-nav-icon>
-        <v-toolbar-title>Microbial Warefare</v-toolbar-title>
-      </v-app-bar>
-
-      <v-navigation-drawer v-model="drawer">
-        <v-card flat>
-          <v-list>
-            <Navigation :navigation="navigation" />
-          </v-list>
-        </v-card>
-      </v-navigation-drawer>
+      <NavNavbar />
 
       <v-main style="min-height: 300px">
         <v-container>
@@ -27,7 +13,7 @@
   </v-card>
 </template>
 <script setup lang="ts">
-const { navigation, page, surround, globals } = useContent();
+const { navigation } = useContent();
 
 const drawer = ref(true);
 </script>