From 6ef19d0aaace33256652bba0253c7be22e4db4e6 Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Wed, 7 Jan 2026 14:05:03 +1000
Subject: [PATCH] feat: add dark mode toggle to navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add ThemeToggle component to desktop AppHeader navbar
- Add ThemeToggle to mobile MobileMenu with label
- Reorganize social links in mobile menu for cleaner layout
- Toggle uses existing ThemeToggle component with sun/moon icons

Closes #4

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/components/AppHeader.tsx  |  2 ++
 apps/web/src/components/MobileMenu.tsx | 24 +++++++++++++++---------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/AppHeader.tsx b/apps/web/src/components/AppHeader.tsx
index fe09957..da11edb 100644
--- a/apps/web/src/components/AppHeader.tsx
+++ b/apps/web/src/components/AppHeader.tsx
@@ -7,6 +7,7 @@ import { Icon } from '@tpmjs/ui/Icon/Icon';
 import Link from 'next/link';
 import { useState } from 'react';
 import { MobileMenu } from './MobileMenu';
+import { ThemeToggle } from './ThemeToggle';
 
 /**
  * Shared application header used across all pages
@@ -117,6 +118,7 @@ export function AppHeader(): React.ReactElement {
               >
                 <Icon icon="github" size="md" />
               </a>
+              <ThemeToggle />
               {session ? (
                 <Link href="/dashboard">
                   <Button
diff --git a/apps/web/src/components/MobileMenu.tsx b/apps/web/src/components/MobileMenu.tsx
index f256a18..22ab38b 100644
--- a/apps/web/src/components/MobileMenu.tsx
+++ b/apps/web/src/components/MobileMenu.tsx
@@ -4,6 +4,7 @@ import { Button } from '@tpmjs/ui/Button/Button';
 import { Icon } from '@tpmjs/ui/Icon/Icon';
 import Link from 'next/link';
 import { useEffect } from 'react';
+import { ThemeToggle } from './ThemeToggle';
 
 interface MobileMenuProps {
   isOpen: boolean;
@@ -125,23 +126,28 @@ export function MobileMenu({
           {/* Divider */}
           <div className="my-4 border-t border-border" />
 
-          {/* Social links */}
-          <ul className="space-y-1">
-            {socialLinks.map((link) => (
-              <li key={link.href}>
+          {/* Social links and theme toggle */}
+          <div className="flex items-center justify-between px-3 py-3">
+            <div className="flex items-center gap-4">
+              {socialLinks.map((link) => (
                 <a
+                  key={link.href}
                   href={link.href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex items-center gap-3 px-3 py-3 text-foreground hover:bg-surface rounded-md transition-colors"
+                  className="text-foreground hover:text-foreground-secondary transition-colors"
                   onClick={onClose}
+                  aria-label={link.label}
                 >
                   <Icon icon={link.icon} size="md" />
-                  {link.label}
                 </a>
-              </li>
-            ))}
-          </ul>
+              ))}
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-foreground-secondary">Theme</span>
+              <ThemeToggle />
+            </div>
+          </div>
 
           {/* Divider */}
           <div className="my-4 border-t border-border" />