From b996ec9279293a5a931df6391a88b84fd99f0df9 Mon Sep 17 00:00:00 2001
From: Krishna Ayyalasomayajula <krishna@ayyalasomayajula.net>
Date: Mon, 1 Jun 2026 19:50:36 -0500
Subject: [PATCH] feat: add site header with navigation and theme toggle

---
 components/layout/Header.tsx | 39 ++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 components/layout/Header.tsx

diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
new file mode 100644
index 0000000..2799f66
--- /dev/null
+++ b/components/layout/Header.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "motion/react";
+import { ThemeToggle } from "@/components/ui/ThemeToggle";
+
+const navLinks = [
+  { label: "Home", href: "/" },
+  { label: "Posts", href: "/posts/" },
+];
+
+export function Header() {
+  return (
+    <motion.nav
+      initial={{ opacity: 0, y: -12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4, ease: "easeOut" }}
+      className="sticky top-0 z-50 bg-canvas/80 backdrop-blur-sm border-b border-border"
+    >
+      <div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
+        <Link href="/" className="font-sans text-xl font-extrabold tracking-tight text-ink hover:text-accent transition-colors">
+          blog
+        </Link>
+        <div className="flex items-center gap-8">
+          {navLinks.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="font-medium text-sm text-ink-soft hover:text-ink transition-colors"
+            >
+              {link.label}
+            </Link>
+          ))}
+          <ThemeToggle />
+        </div>
+      </div>
+    </motion.nav>
+  );
+}