design tweaks

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>