anyame/anyame-frontend-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add headroom.js

Browse Source
This commit is contained in:
bivashy
2026-01-14 23:29:04 +05:00
parent 14909ce480
commit 3cfaad10cf
4 changed files with 53 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/ui/internal/AppHeader.vue
View File

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

57
app/layouts/default.vue
View File

@ -2,15 +2,13 @@
<ClientOnly> <ClientOnly>
<Sonner /> <Sonner />
</ClientOnly> </ClientOnly>
<div class="flex flex-1"> <div class="w-full">
<div class="w-full"> <header ref="header">
<header> <AppHeader />
<AppHeader /> </header>
</header> <main class="h-screen">
<main class="h-screen"> <slot />
<slot /> </main>
</main>
</div>
</div> </div>
</template> </template>
@ -18,4 +16,45 @@
import 'vue-sonner/style.css' import 'vue-sonner/style.css'
import Sonner from '@/components/ui/sonner/Sonner.vue'; import Sonner from '@/components/ui/sonner/Sonner.vue';
import AppHeader from '@/components/ui/internal/AppHeader.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> </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>

3
bun.lock
View File

@ -9,6 +9,7 @@
"@vueuse/core": "^14.1.0", "@vueuse/core": "^14.1.0",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"headroom.js": "^0.12.0",
"lucide-vue-next": "^0.562.0", "lucide-vue-next": "^0.562.0",
"nuxt": "^4.2.2", "nuxt": "^4.2.2",
"reka-ui": "^2.7.0", "reka-ui": "^2.7.0",
@ -865,6 +866,8 @@
"hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="], "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=="], "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=="], "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=="],

1
package.json
View File

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