Fix hydration error

src/components/Navigation.tsx

@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useTheme } from 'next-themes';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Home, FolderGit2, FileText, BookOpenText, Menu, X, Sun, Moon } from 'lucide-react';
 
 // Define the nav items without icons
@@ -18,15 +18,33 @@ export function Navigation() {
   const { theme, setTheme } = useTheme();
   const pathname = usePathname();
   const [isOpen, setIsOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  // Only show theme switcher after mounting to prevent hydration mismatch
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   return (
-    <nav className="sticky top-0 z-50 bg-background border-b border-border shadow-sm">
+    <>
+      {/* Backdrop overlay - faster fade */}
+      <div
+        className={`fixed inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ${
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }`}
+        onClick={() => setIsOpen(false)}
+        aria-hidden="true"
+      />
+
+      {/* Existing nav component */}
+      <nav className="sticky top-0 z-[51] bg-background border-b border-border shadow-sm">
         <div className="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex h-16 items-center justify-between">
             <Link href="/">
               <span className="text-lg font-bold">Sean O'Connor</span>
             </Link>
             <div className="flex items-center space-x-4">
+              {mounted && (
                 <button
                   onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
                   className="text-sm font-medium text-muted-foreground hover:text-primary flex items-center lg:hidden"
@@ -34,6 +52,7 @@ export function Navigation() {
                 >
                   {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
                 </button>
+              )}
               <button
                 onClick={() => setIsOpen(!isOpen)}
                 className="text-gray-500 hover:text-primary focus:outline-none relative h-6 w-6 lg:hidden"
@@ -61,6 +80,7 @@ export function Navigation() {
                   </Link>
                 );
               })}
+              {mounted && (
                 <button
                   onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
                   className="ml-4 text-sm font-medium text-muted-foreground hover:text-primary flex items-center"
@@ -68,10 +88,12 @@ export function Navigation() {
                 >
                   {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
                 </button>
+              )}
             </div>
           </div>
         </div>
 
+        {/* Mobile menu - delayed fade */}
         <div 
           className={`
             absolute
@@ -85,6 +107,9 @@ export function Navigation() {
             shadow-sm
             lg:hidden 
             overflow-hidden
+            transition-all
+            duration-300
+            delay-50
             ${isOpen ? 'h-auto opacity-100' : 'h-0 opacity-0'}
           `}
         >
@@ -113,5 +138,6 @@ export function Navigation() {
           </div>
         </div>
       </nav>
+    </>
   );
 }