Add menu navigation, sun/moon toggle, baby favicon

public/icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <circle cx="16" cy="16" r="15" fill="#fb7185"/>
+  <circle cx="12" cy="12" r="3" fill="white"/>
+  <circle cx="20" cy="12" r="3" fill="white"/>
+  <path d="M10 20 Q16 26 22 20" stroke="white" stroke-width="2" fill="none"/>
+</svg>

src/app/layout.tsx

@@ -16,10 +16,10 @@ export const metadata: Metadata = {
   title: "Tia - Baby Tracking",
   description: "Your baby tracking companion",
   manifest: "/manifest.json",
-  icons: [
-    { url: "/icon-192.png", sizes: "192x192", type: "image/png" },
-    { url: "/icon-512.png", sizes: "512x512", type: "image/png" },
-  ],
+  icons: {
+    icon: "/icon.svg",
+    apple: "/icon.svg",
+  },
 };
 
 export default function RootLayout({

src/app/menu/page.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+export default function MenuPage() {
+  const router = useRouter();
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    const saved = localStorage.getItem("tia_theme");
+    if (saved === "dark") {
+      setDarkMode(true);
+    }
+  }, []);
+
+  const toggleDarkMode = () => {
+    const next = !darkMode;
+    setDarkMode(next);
+    localStorage.setItem("tia_theme", next ? "dark" : "light");
+    if (next) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  };
+
+  const menuItems = [
+    { icon: "🏠", label: "Home", href: "/" },
+    { icon: "📊", label: "Activity", href: "/activity" },
+    { icon: "📈", label: "Growth", href: "/growth" },
+    { icon: "💊", label: "Medical", href: "/medical" },
+    { icon: "📸", label: "Memories", href: "/memories" },
+    { icon: "🤖", label: "AI Chat", href: "/ai" },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
+      {/* Header */}
+      <div className="p-4 flex justify-between items-center">
+        <h1 className="text-xl font-bold">Menu</h1>
+        <button onClick={() => router.back()} className="p-2">✕</button>
+      </div>
+
+      {/* Menu Items */}
+      <div className="px-4 space-y-2">
+        {menuItems.map((item) => (
+          <Link
+            key={item.href}
+            href={item.href}
+            className="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-xl"
+          >
+            <span className="text-2xl">{item.icon}</span>
+            <span className="font-medium">{item.label}</span>
+          </Link>
+        ))}
+      </div>
+
+      {/* Bottom Section */}
+      <div className="absolute bottom-0 left-0 right-0 p-4">
+        {/* Dark Mode Toggle */}
+        <button
+          onClick={toggleDarkMode}
+          className="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-xl w-full mb-2"
+        >
+          <span className="text-2xl">{darkMode ? "🌙" : "☀️"}</span>
+          <span className="font-medium">{darkMode ? "Dark Mode" : "Light Mode"}</span>
+        </button>
+
+        {/* Settings */}
+        <Link
+          href="/settings"
+          className="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-xl"
+        >
+          <span className="text-2xl">⚙️</span>
+          <span className="font-medium">Settings</span>
+        </Link>
+      </div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -177,9 +177,29 @@ export default function HomePage() {
   const [childId] = useState("5ad3b16a-1e0d-45ab-bc91-038397d75d0a");
   const [pendingCount, setPendingCount] = useState(0);
   const [lastLogs, setLastLogs] = useState<any[]>([]);
+  const [darkMode, setDarkMode] = useState(false);
 
   const child = { name: "Baby Tia", birthDate: "2024-01-15" };
 
+  useEffect(() => {
+    const saved = localStorage.getItem("tia_theme");
+    if (saved === "dark") {
+      setDarkMode(true);
+      document.documentElement.classList.add("dark");
+    }
+  }, []);
+
+  const toggleDarkMode = () => {
+    const next = !darkMode;
+    setDarkMode(next);
+    localStorage.setItem("tia_theme", next ? "dark" : "light");
+    if (next) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  };
+
   useEffect(() => {
     const queue = getOfflineQueue();
     setPendingCount(queue.length);
@@ -217,12 +237,16 @@ export default function HomePage() {
             </svg>
           </Link>
         </button>
-        <button className="p-2">
-          <Link href="/settings">
+        <button onClick={toggleDarkMode} className="p-2">
+          {darkMode ? (
             <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.83-1.419 2.366-2.317 4.083-2.317 1.717 0 3.253.898 4.083 2.317M12 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
             </svg>
-          </Link>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.75 9.75 0 0012 21.75 9.75 9.75 0 0015.75 8.646 9 9 0 0020.354 15.354z" />
+            </svg>
+          )}
         </button>
       </div>