feat: amend nav bar

components/top-nav.vue

@@ -1,5 +1,49 @@
+<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 class="border-b dark:border-b-slate-600">
+  <div
+    ref="target"
+    class="border-b 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" as="nav">
       <ULink to="/" class="flex gap-3 items-center">
         <nuxt-img
@@ -10,7 +54,9 @@
         />
         <div class="font-bold">Marios Antonoudiou</div>
       </ULink>
-      <div class="flex gap-3 items-center justify-end text-slate-600">
+      <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"