design tweaks

src/components/BlogHeader.astro

@@ -12,7 +12,17 @@ const { title, date } = Astro.props;
 
 <div class="blog-header">
   <h2>{title}</h2>
-  <h3 style={{ fontSize: "1.1rem" }}>
-    🗓️ <FormattedDate date={date} />
+  <h3>
+    <img src="/media/icons/calendar-2iconImage24px.svg" alt="" />
+    <FormattedDate date={date} />
   </h3>
 </div>
+
+<style>
+  h3 {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 1.1rem;
+  }
+</style>

src/components/Header.astro

@@ -1,16 +1,30 @@
 ---
+const { pathname } = Astro.url;
+console.log(pathname);
+
+const navLinks = [
+  { label: "Blog", icon: "website-with-texticonImage24px", path: "/" },
+  { label: "About", icon: "usericonImage24px", path: "/about" },
+];
 ---
 
 <header>
   <h1>Graham's Blog</h1>
   <nav>
     <ul>
-      <li>
-        <a href="/">📝 Blog</a>
-      </li>
-      <li>
-        <a href="/about">👨‍💻 About</a>
-      </li>
+      {
+        navLinks.map((link) => (
+          <li>
+            <a
+              class={pathname === link.path ? "active-nav" : null}
+              href={link.path}
+            >
+              <img src={`/media/icons/${link.icon}.svg`} />
+              <span>{link.label}</span>
+            </a>
+          </li>
+        ))
+      }
     </ul>
   </nav>
 </header>