create db layout

components/LayoutWrapper.vue

 <script lang="ts" setup>
 export interface Props {
-  fluid: boolean
-  toc: boolean
-  edit: boolean
+  fluid?: boolean
+  toc?: boolean
+  edit?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -10,6 +10,7 @@ const props = withDefaults(defineProps<Props>(), {
   toc: true,
   edit: true
 });
+const drawer = ref(true);
 
 const { page } = useContent();
 const scrollThreshold = ref(200)
@@ -35,7 +36,10 @@ function onScroll() {
       </v-container>
       <!-- <Footer></Footer> -->
     </v-main>
-    <NavNavbar :density="density" />
+    <NavNavbar v-model:drawer="drawer" :density="density"  />
+    <slot name="drawer" :drawer="drawer">
+      <NavDrawer :drawer="drawer" />
+    </slot>
     <NavTableOfContent v-if="toc" :links="page.body.toc.links" />
     <nav-back-to-top />
   </VApp>

components/Nav/Drawer.vue

+<script setup lang="ts">
+
+export interface Props {
+    drawer: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    drawer: true
+});
+// import { useCustomTheme } from '~/composables/useCustomTheme'
+import { useDisplay, useTheme } from "vuetify";
+
+const { navigation } = useContent();
+// const drawer = ref(true);
+
+// const computedNavigation = computed(() => {
+//     return navigation.value
+//         .filter(({ _path }) => {
+//             return _path !== "/refseq";
+//         })
+
+// });
+</script>
+<template>
+    <v-navigation-drawer :model-value="drawer" :border="1" color="background">
+        <v-list nav density="compact" :lines="false">
+            <NavNavigation :navigation="navigation" />
+        </v-list>
+    </v-navigation-drawer>
+</template>
\ No newline at end of file

components/Nav/Navbar.vue

@@ -4,6 +4,7 @@ import { useDisplay, useTheme } from "vuetify";
 
 export interface Props {
   density: 'prominent' | 'compact'
+  drawer: boolean
 }
 const runtimeConfig = useRuntimeConfig();
 
@@ -13,9 +14,10 @@ const theme = useTheme();
 
 const switchTheme = ref(false)
 const props = withDefaults(defineProps<Props>(), {
-  density: "prominent"
+  density: "prominent",
+  drawer: true
 });
-
+const emit = defineEmits(['update:drawer'])
 function toggleTheme() {
   theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
 }
@@ -36,23 +38,22 @@ const sections = ref([
   { id: "help", label: "Help", to: '/help/' },
 ]);
 
-
-
-
-const drawer = ref(true);
-
 const computedNavigation = computed(() => {
   return navigation.value
     .filter(({ _path }) => {
       return _path !== "/refseq";
     })
-
 });
+
+
+function toggleDrawer() {
+  emit('update:drawer', !props.drawer)
+}
 </script>
 <template>
   <v-app-bar :elevation="0" border name="app-bar" :density="density" color="background">
     <template #prepend>
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+      <v-app-bar-nav-icon @click.stop="toggleDrawer"></v-app-bar-nav-icon>
       <!-- <Logo height="45px" /> -->
     </template>
     <v-app-bar-title>
@@ -99,9 +100,4 @@ const computedNavigation = computed(() => {
     </template>
 
   </v-app-bar>
-  <v-navigation-drawer v-model="drawer" :border="1" color="background">
-    <v-list nav density="compact" :lines="false">
-      <NavNavigation :navigation="computedNavigation" />
-    </v-list>
-  </v-navigation-drawer>
 </template>
\ No newline at end of file

composables/useFetchArticle.ts

-import { useArticlesStore, CslJson } from '../stores/articles'
+import { useArticlesStore, type CslJson } from '../stores/articles'
 import { ref, computed, watchEffect, toValue } from "vue"
 // import { useFetch } from '#app';
 // import { useFetch } from "nuxt"

content/4.refseq.md

 ---
-layout: article-no-toc
+layout: db
 navigation: false
 ---
\ No newline at end of file

content/5.predicted-structure.md

 ---
-layout: article-no-toc
+layout: db
 navigation: false
 ---
 

layouts/db.vue

+<script setup lang="ts">
+
+import { useFacetsStore, type Facets } from '~~/stores/facets'
+
+const facetStore = useFacetsStore()
+</script>
+<template>
+    <LayoutWrapper :fluid="true" :toc="false" :edit="false">
+        <template #drawer="{ drawer }">
+            <v-navigation-drawer :model-value="drawer" :border="1" color="background">
+                <v-list>
+                    <v-list-item v-for="(value, key) in facetStore.facets.facetDistribution" :key="key"
+                        :title="key"></v-list-item>
+                </v-list>
+            </v-navigation-drawer>
+        </template>
+
+        <slot />
+    </LayoutWrapper>
+</template>
+
+

package.json

@@ -7,10 +7,10 @@
     "preview": "nuxt preview"
   },
   "devDependencies": {
-    "@nuxt/content": "^2.8.5",
+    "@nuxt/content": "^2.9.0",
     "@types/node": "^18.15.12",
-    "@vueuse/core": "^10.4.1",
-    "@vueuse/nuxt": "^10.4.1",
+    "@vueuse/core": "^10.6.1",
+    "@vueuse/nuxt": "^10.6.1",
     "nuxt": "^3.8.1",
     "vuetify-nuxt-module": "^0.6.7"
   },