feat: redesign Blog Navbar to match Landing Page (#659)

ivke995 · web-flow · commit b507536825d0 · 2025-10-09T15:17:18.000+02:00
* feat: use Navigation instead Header component for blog page navigation

* fix: edit /blog navbar header component to match CaseStudy and add gsap animations

* fix: rename header component into blog-navigation

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

* fix: position static
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,
@@ -25,15 +27,19 @@ const caseStudies = [
     href: "/blog/migrating-an-enterprise-app-from-angularjs-to-react",
   },
 ];
+
+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"
@@ -130,7 +136,7 @@ const caseStudies = [
           data-navhidden="true"
           id="book-a-call-action"
           class="invisible w-fit font-medium h-[39px] items-center px-4 py-2 rounded-md text-base text-center whitespace-nowrap bg-[#545664] text-[#ffffff] hover:opacity-90"
-          href={"#book-a-call-section"}
+          href={href}
         >
           Book a call
         </a>
@@ -171,7 +177,10 @@ const caseStudies = [
 
       {
         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>
         ))
@@ -186,7 +195,7 @@ const caseStudies = [
             text-base text-center
             whitespace-nowrap
              bg-[#545664] text-[#ffffff] hover:opacity-90"
-      href={"#book-a-call-section"}
+      href={href}
     >
       Book a call
     </a>
@@ -228,6 +237,8 @@ const caseStudies = [
   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;
 
@@ -244,6 +255,8 @@ const caseStudies = [
       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
@@ -2,9 +2,9 @@
 import theme from "../..//theme.json";
 import Footer from "../components/footer.astro";
 import Posthog from "../components/posthog.astro";
-import Header from "./header.astro";
 import "../styles/main.css";
 import { AstroFont } from "astro-font";
+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">
-    <Header />
+    <Navigation position="static" />
     <main class="min-h-[60vh]">
       <slot />
     </main>
diff --git a/apps/website/src/layouts/header.astro b/apps/website/src/layouts/header.astro
