77 lines
1.9 KiB
Vue
77 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
const target = ref(null);
|
|
const { directions, y, arrivedState } = useScroll(window);
|
|
|
|
const motionInstance = useMotion(target, {
|
|
initial: {
|
|
y: 0,
|
|
transition: {
|
|
type: "keyframes",
|
|
},
|
|
},
|
|
hidden: {
|
|
y: -60,
|
|
transition: {
|
|
type: "keyframes",
|
|
},
|
|
},
|
|
});
|
|
|
|
const throttledApply = useThrottleFn((state: string) => {
|
|
return motionInstance.apply(state);
|
|
}, 300);
|
|
|
|
watchEffect(() => {
|
|
if (arrivedState.top) {
|
|
motionInstance.apply("initial");
|
|
return;
|
|
}
|
|
|
|
if (directions.top) {
|
|
throttledApply("initial");
|
|
return;
|
|
}
|
|
|
|
if (directions.bottom && y.value > 100) {
|
|
throttledApply("hidden");
|
|
return;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
ref="target"
|
|
class="border-b border-b-gray-200 dark:border-none dark:border-b-slate-600 top-0 bg-white z-10 dark:bg-slate-800 bg-opacity-85 dark:bg-opacity-90 backdrop-blur-sm sticky"
|
|
>
|
|
<UContainer class="grid grid-cols-2 items-center gap-3 !py-2 max-w-3xl" as="nav">
|
|
<ULink to="/" class="flex gap-3 items-center">
|
|
<nuxt-img
|
|
placeholder
|
|
alt="Marios Antonoudiou"
|
|
src="mariosant.webp"
|
|
class="w-10 h-10 rounded-full border border-gray-200 dark:border-gray-800 dark:bg-slate-300 block"
|
|
/>
|
|
<div class="font-bold text-slate-800 dark:text-white">Marios Antonoudiou</div>
|
|
</ULink>
|
|
<div
|
|
class="flex gap-3 items-center justify-end text-slate-600 dark:text-slate-400"
|
|
>
|
|
<ULink
|
|
to="/"
|
|
class="font-semibold text-sm underline-offset-4"
|
|
activeClass="text-slate-900 dark:text-slate-200 underline"
|
|
>Home</ULink
|
|
>
|
|
|
|
<ULink
|
|
to="/articles"
|
|
class="font-semibold text-sm underline-offset-4"
|
|
activeClass="text-slate-900 dark:text-slate-200 underline"
|
|
>Articles</ULink
|
|
>
|
|
</div>
|
|
</UContainer>
|
|
</div>
|
|
</template>
|