Add headroom.js

app/layouts/default.vue

@@ -2,15 +2,13 @@
     <ClientOnly>
         <Sonner />
     </ClientOnly>
-    <div class="flex flex-1">
-        <div class="w-full">
-            <header>
-                <AppHeader />
-            </header>
-            <main class="h-screen">
-                <slot />
-            </main>
-        </div>
+    <div class="w-full">
+        <header ref="header">
+            <AppHeader />
+        </header>
+        <main class="h-screen">
+            <slot />
+        </main>
     </div>
 </template>
 
@@ -18,4 +16,45 @@
 import 'vue-sonner/style.css'
 import Sonner from '@/components/ui/sonner/Sonner.vue';
 import AppHeader from '@/components/ui/internal/AppHeader.vue';
+
+import Headroom from "headroom.js";
+
+const header = ref(null);
+
+onMounted(() => {
+    const headroom = new Headroom(header.value, {
+        offset: 25,
+        tolerance: {
+            up: 25,
+            down: 10
+        },
+        classes: {
+            initial: "headroom",
+            pinned: 'headroom--pinned',
+            unpinned: 'headroom--unpinned',
+        }
+    });
+    headroom.init();
+});
 </script>
+
+<style>
+.headroom {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 50;
+    width: 100%;
+    transition: transform 200ms linear;
+    background-color: var(--background);
+}
+
+.headroom--pinned {
+    transform: translateY(0%);
+}
+
+.headroom--unpinned {
+    transform: translateY(-100%);
+}
+</style>