improved current page handling

src/components/Header.astro

@@ -2,15 +2,53 @@
 import NavLink from "./NavLink.astro";
 
 const { currentPage } = Astro.props;
+
+const pages = [
+    { title: "Home", path: "/" },
+    { title: "About", path: "/about" },
+];
 ---
 
+<style>
+    .cancel-button {
+        background: none;
+        border: none;
+        color: var(--ayu-red-500);
+        cursor: pointer;
+        padding: 0;
+    }
+</style>
+
 <header class="">
     <div class="w-full flex gap-4 px-4 py-2 border-b-1 border-ayu-gutter">
         <h1 class="text-2xl text-ayu-red-500">oliver bryan</h1>
     </div>
-    <!-- nav: -->
-    <div class="w-full flex gap-4 px-4 py-2 border-b-1 border-ayu-gutter">
-        <NavLink currentPage={currentPage} title="home" href="/" />
-        <NavLink currentPage={currentPage} title="about" href="/about" />
+    <div
+        class="w-full flex gap-4 px-4 py-2 border-b-1 border-ayu-gutter items-center"
+    >
+        {
+            pages.map((page) => (
+                <NavLink
+                    currentPage={currentPage}
+                    title={page.title}
+                    href={page.path}
+                />
+            ))
+        }
+
+        {
+            !pages.find((page) => page.path === currentPage.path) && (
+                <span class="flex items-center justify-start gap-2">
+                    <span class="text-ayu-gutter">| {currentPage.path} </span>
+                    <button
+                        class="cancel-button flex items-center justify-center"
+                        type="button"
+                        onclick="window.location.href='/'"
+                    >
+                        <span class="text-2xl leading-none">&times;</span>
+                    </button>
+                </span>
+            )
+        }
     </div>
 </header>

src/components/NavLink.astro

@@ -13,6 +13,6 @@ const { currentPage, title, href } = Astro.props;
 
 <a
     href={href}
-    class={`nav-link ${currentPage.toLowerCase() === title.toLowerCase() ? "text-ayu-accent font-bold" : ""}`}
+    class={`nav-link ${currentPage.path === href ? "text-ayu-accent font-bold" : ""}`}
     >{title}</a
 >

src/components/ProjectPage.astro

@@ -32,7 +32,12 @@ const { metadata } = Astro.props;
     }
 </style>
 
-<Layout currentPage="projects">
+<Layout
+    currentPage={{
+        title: `${metadata.title}`,
+        path: `projects/${metadata.slug}`,
+    }}
+>
     <div class="text-md">
         <h1 class="text-2xl text-ayu-accent mb-2">
             {metadata.title}

src/pages/about.astro

@@ -3,7 +3,7 @@ import Layout from "../layouts/Layout.astro";
 import TimeSince from "../components/TimeSince.astro";
 ---
 
-<Layout currentPage="about">
+<Layout currentPage={{ title: "about", path: "/about" }}>
     <div class="text-md">
         <p>
             AGE: <TimeSince

src/pages/index.astro

@@ -67,7 +67,7 @@ const projects: ProjectMetadata[] = Object.values(
     .sort((a, b) => parseDate(b.date).getTime() - parseDate(a.date).getTime());
 ---
 
-<Layout currentPage="home">
+<Layout currentPage={{ title: "home", path: "/" }}>
     <!-- <h1 class="text-2xl font-medium mb-4">projects:</h1> -->
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4">