Add headroom.js

app/components/ui/internal/AppHeader.vue

@@ -9,7 +9,7 @@ import { Search } from 'lucide-vue-next';
         </div>
         <div>
             <Button variant="ghost">
-                Search
+                Home
             </Button>
             <Button variant="ghost">
                 Social

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>

bun.lock

@@ -9,6 +9,7 @@
         "@vueuse/core": "^14.1.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "headroom.js": "^0.12.0",
         "lucide-vue-next": "^0.562.0",
         "nuxt": "^4.2.2",
         "reka-ui": "^2.7.0",
@@ -865,6 +866,8 @@
 
     "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
 
+    "headroom.js": ["headroom.js@0.12.0", "", {}, "sha512-iXnAafUm3FdzfJ91uixLws2hkKI1jC8bAKK/pt7XYr8Ie1jO7xbK48Ycpl9tUPyBgkzuj1p/PhJS0fy4E/5anA=="],
+
     "hookable": ["hookable@5.5.3", "", {}, "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="],
 
     "http-errors": ["http-errors@2.0.1", "", { "dependencies": { "depd": "~2.0.0", "inherits": "~2.0.4", "setprototypeof": "~1.2.0", "statuses": "~2.0.2", "toidentifier": "~1.0.1" } }, "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ=="],

package.json

@@ -14,6 +14,7 @@
     "@vueuse/core": "^14.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "headroom.js": "^0.12.0",
     "lucide-vue-next": "^0.562.0",
     "nuxt": "^4.2.2",
     "reka-ui": "^2.7.0",