From 599e019f4e31a26608531c3d7822a885017f3465 Mon Sep 17 00:00:00 2001 From: Alfie Jones Date: Mon, 10 Jun 2024 18:01:50 +0100 Subject: [PATCH] Updating header to show active page --- .../src/components/header.astro | 22 +++++++++---------- apps/marketing-astro/src/layouts/root.astro | 5 +++-- .../src/pages/docs/[...path].astro | 1 + apps/marketing-astro/src/pages/home.astro | 1 + 4 files changed, 16 insertions(+), 13 deletions(-) diff --git a/apps/marketing-astro/src/components/header.astro b/apps/marketing-astro/src/components/header.astro index 5ba66697..3afc7043 100644 --- 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;
Pixeleye @@ -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; {/* DOC SEARCH */} -
+