make the navbar density reduce when scroll down

components/Nav/Navbar.vue

@@ -2,6 +2,9 @@
 // import { useCustomTheme } from '~/composables/useCustomTheme'
 import { useDisplay, useTheme } from "vuetify";
 
+export interface Props {
+  density: 'prominent' | 'compact'
+}
 const runtimeConfig = useRuntimeConfig();
 
 const { navigation } = useContent();
@@ -9,6 +12,10 @@ const { mobile } = useDisplay();
 const theme = useTheme();
 
 
+const props = withDefaults(defineProps<Props>(), {
+  density: "prominent"
+});
+
 function toggleTheme() {
   theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
 }
@@ -38,7 +45,7 @@ const computedNavigation = computed(() => {
 });
 </script>
 <template>
-  <v-app-bar :elevation="0" border density="prominent" scroll-behavior="hide" scroll-threshold="150">
+  <v-app-bar :elevation="0" border :density="density">
     <template #prepend>
       <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
       <!-- <Logo height="45px" /> -->

layouts/article.vue

@@ -3,13 +3,15 @@ const { page } = useContent();
 // import { useCustomTheme } from '~/composables/useCustomTheme'
 import { useDisplay } from 'vuetify'
 
-// const { isDark } = useCustomTheme()
-// const { mobile } = useDisplay()
-console.log("================================")
-// console.log(surround)
-// console.log(prev)
-// console.log(next)
-console.log(page)
+
+const scrollThreshold = ref(200)
+const density = ref("prominent")
+function onScroll(e) {
+  if (window.scrollY > scrollThreshold.value) {
+    density.value = "compact"
+  }
+  else { density.value = "prominent" }
+}
 </script>
 <template>
   <VApp>
@@ -19,7 +21,7 @@ console.log(page)
       <!-- <v-container class="fill-height w-auto" > -->
       <!-- <v-card flat max-width="1000" min-height="300" color="transparent">
             <v-card-text> -->
-      <v-container>
+      <v-container v-scroll="onScroll">
         <slot />
         <!-- </v-card-text>
           </v-card> -->
@@ -28,7 +30,7 @@ console.log(page)
       </v-container>
       <Footer></Footer>
     </v-main>
-    <NavNavbar />
+    <NavNavbar :density="density" />
     <NavTableOfContent :links="page.body.toc.links" />
     <nav-back-to-top />
   </VApp>