Change title + center

components/LayoutWrapper.vue

@@ -8,13 +8,15 @@ export interface Props {
   toc?: boolean
   edit?: boolean
   navDrawer?: boolean
+  title?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   fluid: false,
   toc: true,
   edit: true,
-  navDrawer: true
+  navDrawer: true,
+  title: null
 });
 const drawer = ref(true);
 
@@ -45,7 +47,8 @@ function onScroll() {
       </v-container>
       <!-- <Footer></Footer> -->
     </v-main>
-    <NavNavbar v-model:drawer="drawer" :density="density" :drawer-enabled="navDrawer" />
+    <NavNavbar v-model:drawer="drawer" :title="title !== null ? title : undefined" :density="density"
+      :drawer-enabled="navDrawer" />
     <slot v-if="navDrawer" name="drawer" :drawer="drawer">
       <NavDrawer :drawer="drawer" />
     </slot>

components/Nav/Navbar.vue

@@ -6,6 +6,7 @@ export interface Props {
   density: 'prominent' | 'compact'
   drawer: boolean
   drawerEnabled: boolean
+  title?: string
 }
 const runtimeConfig = useRuntimeConfig();
 
@@ -16,7 +17,8 @@ const switchTheme = ref(false)
 const props = withDefaults(defineProps<Props>(), {
   density: "prominent",
   drawer: true,
-  drawerEnabled: true
+  drawerEnabled: true,
+  title: "Knowledge database of all known anti-phage systems"
 });
 const emit = defineEmits(['update:drawer'])
 function toggleTheme() {
@@ -47,13 +49,12 @@ function toggleDrawer() {
 <template>
   <v-app-bar :elevation="0" border name="app-bar" :density="density" color="background">
     <template v-if="drawerEnabled" #prepend>
-      <v-app-bar-nav-icon @click.stop="toggleDrawer"></v-app-bar-nav-icon>
+      <v-app-bar-nav-icon @click.stop="toggleDrawer" class="d-flex align-self-center"></v-app-bar-nav-icon>
       <!-- <Logo height="45px" /> -->
     </template>
-    <v-app-bar-title>
-      <span class="d-flex align-center">
-        Knowledge database of all known anti-phage systems
-      </span>
+    <v-app-bar-title class="d-flex align-self-center py-0">
+      <span class="">
+        {{ title }} </span>
     </v-app-bar-title>
     <template #append>
       <template v-if="!mobile">

layouts/db.vue

 
-<template>
-    <LayoutWrapper :fluid="true" :toc="false" :edit="false" :nav-drawer="false">
-        
+<script setup lang="ts">
+const { page } = useContent();
 
+</script>
+<template>
+    <LayoutWrapper :title="page.title" :fluid="true" :toc="false" :edit="false" :nav-drawer="false">
         <slot />
     </LayoutWrapper>
 </template>