fix: check in navigation component if page location is /blog

ivke995 · ivke995 · commit 7a5af83a4caf · 2025-10-09T14:52:44.000+02:00
diff --git a/apps/website/src/components/navigation.astro b/apps/website/src/components/navigation.astro
@@ -4,6 +4,8 @@ import crocoderLogo from "../assets/crocoder-logo.png";
 import Menu from "./Menu.astro";
 import MenuItem from "./MenuItem.astro";
 
+const { position } = Astro.props;
+
 const optimizedLogo = await getImage({
   src: crocoderLogo,
   width: 63,
@@ -26,16 +28,18 @@ const caseStudies = [
   },
 ];
 
+const isBlogPage = Astro.url.pathname.startsWith("/blog");
+
 const href = "#book-a-call-section";
 ---
 
 <header
-  class="fixed m-auto
-    top-0
-    md:mx-2
-    md:top-1
-    z-50
-    w-full flex flex-col"
+  class={`${position ?? "fixed"} m-auto
+  top-0
+  md:mx-2
+  ${isBlogPage ? "md:mt-1" : "md:top-1"}
+  z-50
+  w-full flex flex-col`}
 >
   <nav
     id="nav-bar"
@@ -173,7 +177,10 @@ const href = "#book-a-call-section";
 
       {
         caseStudies.map((item) => (
-          <a class="text-xl hover:text-white text-wrap min-h-8" href={item.href}>
+          <a
+            class="text-xl hover:text-white text-wrap min-h-8"
+            href={item.href}
+          >
             {item.title}
           </a>
         ))
@@ -230,6 +237,8 @@ const href = "#book-a-call-section";
   const mobileList = document.getElementById("mobile-list");
   const navMenuToggle = document.getElementById("nav-menu-toggle");
 
+  const isBlogPage = window.location.pathname.startsWith("/blog");
+
   mm.add("(width >= 768px)", () => {
     if (!navBar || !bookACallAction) return;
 
@@ -246,6 +255,8 @@ const href = "#book-a-call-section";
       display: "none",
     });
 
+    if (isBlogPage) return;
+
     const tl = gsap.timeline({
       paused: true,
       defaults: { duration: FRAME_DURATION, ease: "none" },
diff --git a/apps/website/src/layouts/base-blog.astro b/apps/website/src/layouts/base-blog.astro
@@ -4,7 +4,7 @@ import Footer from "../components/footer.astro";
 import Posthog from "../components/posthog.astro";
 import "../styles/main.css";
 import { AstroFont } from "astro-font";
-import BlogNavigation from "./blog-navigation.astro";
+import Navigation from "../components/navigation.astro";
 
 const pf = theme.fonts.font_family.primary;
 const sf = theme.fonts.font_family.secondary;
@@ -56,7 +56,7 @@ if (theme.fonts.font_family.secondary) {
     />
   </head>
   <body class="bg-body font-primary font-normal leading-relaxed text-text">
-    <BlogNavigation />
+    <Navigation position="none" />
     <main class="min-h-[60vh]">
       <slot />
     </main>
diff --git a/apps/website/src/layouts/blog-navigation.astro b/apps/website/src/layouts/blog-navigation.astro
