Configurable layout wrapper

components/LayoutWrapper.vue

+<script lang="ts" setup>
+export interface Props {
+  fluid: boolean
+  toc: boolean
+  edit: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fluid: false,
+  toc: true,
+  edit: true
+});
+
+const { page } = useContent();
+const scrollThreshold = ref(200)
+const density = ref<'compact' | 'prominent'>("prominent")
+function onScroll() {
+  if (window.scrollY > scrollThreshold.value) {
+    density.value = "compact"
+  }
+  else { density.value = "prominent" }
+}
+
+</script>
+
+<template>
+  <VApp>
+    <v-main style="min-height: 300px">
+      <v-container v-scroll="onScroll" :fluid="fluid">
+        <slot />
+        <!-- </v-card-text>
+          </v-card> -->
+        <EditGitlab v-if="edit" />
+        <NavPrevNext v-if="edit" />
+      </v-container>
+      <!-- <Footer></Footer> -->
+    </v-main>
+    <NavNavbar :density="density" />
+    <NavTableOfContent v-if="toc" :links="page.body.toc.links" />
+    <nav-back-to-top />
+  </VApp>
+</template>
+
+<style scoped></style>

components/Nav/Navbar.vue

@@ -50,7 +50,7 @@ const computedNavigation = computed(() => {
 });
 </script>
 <template>
-  <v-app-bar :elevation="0" border :density="density" color="background">
+  <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>
       <!-- <Logo height="45px" /> -->

layouts/article-no-toc.vue

 
 <template>
-    <VApp>
-        <v-main style="min-height: 300px">
-            <v-container>
+    <LayoutWrapper :fluid="true" :toc="false" :edit="false">
         <slot />
-                <NavPrevNext />
-            </v-container>
-        </v-main>
-        <NavNavbar />
-        <nav-back-to-top />
-    </VApp>
+    </LayoutWrapper>
 </template>
 
 <style scoped>

layouts/article.vue

-<script setup lang="ts">
-const { page } = useContent();
-const scrollThreshold = ref(200)
-const density = ref<'compact' | 'prominent'>("prominent")
-function onScroll() {
-  if (window.scrollY > scrollThreshold.value) {
-    density.value = "compact"
-  }
-  else { density.value = "prominent" }
-}
-</script>
+<script setup lang="ts"></script>
 <template>
-  <VApp>
-    <v-main style="min-height: 300px">
-      <v-container v-scroll="onScroll">
+  <LayoutWrapper :fluid="true" :toc="false">
     <slot />
-        <!-- </v-card-text>
-          </v-card> -->
-        <EditGitlab />
-        <NavPrevNext />
-      </v-container>
-      <!-- <Footer></Footer> -->
-    </v-main>
-    <NavNavbar :density="density" />
-    <NavTableOfContent :links="page.body.toc.links" />
-    <nav-back-to-top />
-  </VApp>
+  </LayoutWrapper>
 </template>
 
 <style scoped>

pages/defense-systems.vue

 <script setup lang="ts">
-import { useDisplay } from "vuetify";
+import { useDisplay, useLayout } from "vuetify";
 
 const { height } = useDisplay();
-
+// const { getLayoutItem } = useLayout()
+// console.log(getLayoutItem('app-bar'))
 const { data, error, pending } = await useAsyncData(
   "list-defense-systems",
   () => queryContent("/defense-systems").where({ _partial: false }).find()
@@ -53,6 +54,6 @@ const systems = computed(() => {
 </script>
 <template>
   <v-card flat color="transparent">
-    <ListSystems :headers="headers" :systems="systems" :height="height - 350"></ListSystems>
+    <ListSystems :headers="headers" :systems="systems" :height="height - 220"></ListSystems>
   </v-card>
 </template>
\ No newline at end of file

pages/predicted-structure.vue

@@ -7,7 +7,7 @@ import { useDisplay } from "vuetify";
 const { height } = useDisplay();
 const minTableHeight = ref(400)
 const computedTableHeight = computed(() => {
-    const computedHeight = height.value - 500
+    const computedHeight = height.value - 400
     return computedHeight > minTableHeight.value ? computedHeight : minTableHeight.value
 })
 
@@ -36,7 +36,7 @@ const {
 </script>
 
 <template>
-    <v-card>
+    <v-card flat>
         <v-toolbar color="primary" density="compact">
             <v-app-bar-nav-icon></v-app-bar-nav-icon>
             <v-toolbar-title>Predicted Structures summary ({{ totalHits }})

pages/refseq.vue

@@ -156,7 +156,7 @@ const datatable = ref(null)
 </script>
 
 <template>
-  <v-card>
+  <v-card flat>
     <v-toolbar color="primary" density="compact">
       <v-app-bar-nav-icon></v-app-bar-nav-icon>
       <v-toolbar-title>RefSeq Entries ({{ totalHits }})
@@ -192,7 +192,7 @@ const datatable = ref(null)
     </v-data-table-virtual>
 
   </v-card>
-  <v-card class="my-3" :loading="pending">
+  <v-card flat class="my-3" :loading="pending">
     <v-card-title> Systems Distribution</v-card-title>
 
     <!-- <v-toolbar density="compact"><v-toolbar-title> Distribution Systems</v-toolbar-title></v-toolbar> -->
@@ -200,7 +200,7 @@ const datatable = ref(null)
       <PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
     </v-card-text>
   </v-card>
-  <v-card :loading="pending">
+  <v-card flat :loading="pending">
     <v-card-title> Taxonomic Distribution</v-card-title>
     <!-- <v-toolbar density="compact"><v-toolbar-title> Distribution Taxonomy</v-toolbar-title></v-toolbar> -->
     <v-card-text>