Updating header to show active page

pixeleye-io · Jun 10, 2024 · 599e019 · 599e019
1 parent 7352aed
commit 599e019
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 13 deletions.
diff --git a/apps/marketing-astro/src/components/header.astro b/apps/marketing-astro/src/components/header.astro
@@ -1,11 +1,14 @@
 ---
-const pathname = "/home";
 import { cx } from "class-variance-authority";
 import Button from "./button.astro";
 import { Logo } from "@pixeleye/ui/src/logo";
 import Bars3Icon from "@heroicons/react/24/solid/Bars3Icon";
 import XMarkIcon from "@heroicons/react/24/solid/XMarkIcon";
 
+interface Props {
+  activeNav: "Home" | "Docs" | "Playground";
+}
+
 const navigation = [
   { name: "Home", href: "/home" },
   {
@@ -17,6 +20,8 @@ const navigation = [
   { name: "Playground", href: "/playground" },
 ];
 
+const { activeNav } = Astro.props;
+
 const isLoggedIn = false;
 ---
 
@@ -30,10 +35,7 @@ const isLoggedIn = false;
     <div class="flex items-center gap-x-12">
       <a
         href="/home"
-        class={cx(
-          "-m-1.5 p-1.5",
-          pathname.startsWith("/home") && "!text-tertiary"
-        )}
+        class={cx("-m-1.5 p-1.5", activeNav === "Home" && "!text-tertiary")}
       >
         <span class="sr-only">Pixeleye</span>
         <Logo className="h-8 w-auto hover:text-tertiary transition-colors" />
@@ -45,8 +47,7 @@ const isLoggedIn = false;
               href={item.href}
               class={cx(
                 "text-sm font-semibold leading-6 text-on-surface hover:text-tertiary transition-colors",
-                pathname.startsWith(item.selector || item.href) &&
-                  "!text-tertiary"
+                activeNav === item.name && "!text-tertiary"
               )}
             >
               {item.name}
@@ -65,7 +66,7 @@ const isLoggedIn = false;
       </a>
 
       {/* DOC SEARCH */}
-      <div id="docsearch" class="lg:w-9 w-8"  transition:persist></div>
+      <div id="docsearch" class="lg:w-9 w-8" transition:persist></div>
 
       <!-- @ts-ignore -->
       <Button
@@ -121,7 +122,7 @@ const isLoggedIn = false;
         href="/home"
         class={cx(
           "-mx-1.5 -mt-1 p-1.5",
-          pathname.startsWith("/home") && "!text-tertiary"
+          activeNav === "Home" && "!text-tertiary"
         )}
       >
         <span class="sr-only">Pixeleye</span>
@@ -144,8 +145,7 @@ const isLoggedIn = false;
                 href={item.href}
                 class={cx(
                   "-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-on-surface-container hover:bg-surface-container-high",
-                  pathname.startsWith(item.selector || item.href) &&
-                    "!text-tertiary"
+                  activeNav === item.name && "!text-tertiary"
                 )}
               >
                 {item.name}

diff --git a/apps/marketing-astro/src/layouts/root.astro b/apps/marketing-astro/src/layouts/root.astro
@@ -9,9 +9,10 @@ interface Props {
   title: string;
   description: string;
   viewTransitions?: boolean;
+  activeNav: "Home" | "Docs" | "Playground";
 }
 
-const { title, description, viewTransitions } = Astro.props;
+const { title, description, viewTransitions, activeNav } = Astro.props;
 ---
 
 <html lang="en" class="bg-surface text-on-surface">
@@ -61,7 +62,7 @@ const { title, description, viewTransitions } = Astro.props;
   <body
     class="font-sans min-h-screen bg-surface text-on-surface dark:selection:bg-teal-950 dark:selection:text-teal-50 selection:bg-teal-600 selection:text-teal-50"
   >
-    <Header />
+    <Header {activeNav} />
 
     <div class="lg:pt-[4.5rem] pt-16">
       <slot />

diff --git a/apps/marketing-astro/src/pages/docs/[...path].astro b/apps/marketing-astro/src/pages/docs/[...path].astro
@@ -87,6 +87,7 @@ const sections = await getFiles();
 ---
 
 <Root
+activeNav="Docs"
   title={frontmatter["title"] + " | Pixeleye"}
   description={frontmatter["description"]}
   viewTransitions

diff --git a/apps/marketing-astro/src/pages/home.astro b/apps/marketing-astro/src/pages/home.astro
@@ -145,6 +145,7 @@ const faqs = [
 ---
 
 <Root
+  activeNav="Home"
   title="Pixeleye - Open-source visual testing & review platform"
   description="A visual testing platform which is open-sourced, self-hostable and cross-browser."
 >
-Original file line number
+Diff line change
@@ Expand Up / @@ -145,6 +145,7 @@ const faqs = [ @@
     ---
     <Root
+      activeNav="Home"
       title="Pixeleye - Open-source visual testing & review platform"
       description="A visual testing platform which is open-sourced, self-hostable and cross-browser."
     >
@@ Expand Down @@