Impr header animation for blog website

nuxt-frontend/assets/css/app.css

@@ -125,3 +125,27 @@
   font-weight: 600;
   src: url(~/assets/fonts/Comme-SemiBold-Subset.woff2) format("woff2");
 }
+
+@font-face {
+  font-display: swap;
+  font-family: Helvetica-Light;
+  font-style: normal;
+  font-weight: 300;
+  src: url(~/assets/fonts/Helvetica-Light.woff2) format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Helvetica-Regular;
+  font-style: normal;
+  font-weight: 400;
+  src: url(~/assets/fonts/Helvetica-Regular.woff2) format("woff2");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Helvetica-Bold;
+  font-style: normal;
+  font-weight: 700;
+  src: url(~/assets/fonts/Helvetica-Bold.woff2) format("woff2");
+}

nuxt-frontend/components/Blog.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="count == 0 || status == config.NOT_FOUND ? 'h-screen' : ''">
-    <Header />
+    <Header :animateOnScroll="false" />
     <div
       v-if="count == 0 || status == config.NOT_FOUND"
       class="h-1/2 flex text-[1.4rem] text-black-900 items-center justify-center"

nuxt-frontend/components/partials/NewHeader.vue

@@ -240,6 +240,12 @@
 
 <script type="module">
 export default {
+  props: {
+    animateOnScroll: {
+      type: Boolean,
+      default: true, // Default to true if not provided
+    },
+  },
   data() {
     return {
       id: this.$route.params.id,
@@ -309,27 +315,28 @@ export default {
   },
   mounted() {
     this.navContainerHeight = this.$refs.mainHeader.clientHeight;
-    if (
-      this.currentRoutePath.includes("portfolio/") &&
-      window.innerWidth > 992 &&
-      !["/portfolio", "/portfolio/"].includes(this.currentRoutePath)
-    ) {
-      this.podcastRef = document.getElementById("response");
-      this.podcastRef.style.marginTop = -this.navContainerHeight + "px";
-      this.podcastRef.addEventListener("scroll", this.handleScroll);
+
+    // Only add the scroll event listener if animation is enabled
+    if (this.animateOnScroll) {
+      window.addEventListener("scroll", this.handleScroll);
     }
-    window.addEventListener("scroll", this.handleScroll);
     this.width = window.innerWidth;
   },
   unmounted() {
-    if (this.podcastRef) {
+    if (this.animateOnScroll && this.podcastRef) {
       this.podcastRef.removeEventListener("scroll", this.handleScroll);
     }
     window.removeEventListener("scroll", this.handleScroll);
   },
-  inject: ["mixpanel"],
   methods: {
     handleScroll() {
+      // Only animate the navbar if the prop allows it
+      if (!this.animateOnScroll) {
+        this.showNavbar = true;
+        this.animateNavbar = true;
+        return;
+      }
+
       let scrollY = this.podcastRef
         ? this.podcastRef.scrollTop
         : window.scrollY;

nuxt-frontend/pages/[slug].vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!assets">
-    <Header />
+    <Header :animateOnScroll="false" />
     <div :class="post.is_resource ? '' : 'container pl-0'">
       <BlogDetail
         :mixpanel="$mixpanel"

nuxt-frontend/tailwind.config.js

@@ -127,6 +127,9 @@ module.exports = {
         "comme-regular": ["Comme-Regular"],
         "comme-medium": ["Comme-Medium"],
         "comme-semibold": ["Comme-SemiBold"],
+        "helvetica-light": ["Helvetica-Light"],
+        "helvetica-regular": ["Helvetica-Regular"],
+        "helvetica-Bold": ["Helvetica-Bold"],
       },
       letterSpacing: {
         "extra-wider": "0.0625em",