Navbar density scroll down

References #140 (closed)

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" /> -->