Fix navbar hydration error/layout shift

src/app/projects/page.tsx

@@ -1,11 +1,21 @@
+'use client';
+
+import { useEffect, useState } from "react";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "~/components/ui/card";
 import { Badge } from "~/components/ui/badge";
 import Link from "next/link";
-import { ArrowUpRight, Sparkles } from "lucide-react";
+import { ArrowUpRight } from "lucide-react";
 import { projects } from "~/lib/data";
 import Image from "next/image";
+import { CardSkeleton } from "~/components/ui/skeletons";
 
 export default function ProjectsPage() {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(false);
+  }, []);
+
   return (
     <div className="space-y-8">
       <section className="prose prose-zinc dark:prose-invert max-w-none">
@@ -17,57 +27,65 @@ export default function ProjectsPage() {
       </section>
 
       <div className="space-y-6">
-        {projects.map((project, index) => (
-          <Card key={index}>
-            <div className="flex flex-col lg:flex-row">
-              <div className="flex-1">
-                <CardHeader className="pb-2">
-                  <div className="flex items-center justify-between">
-                    <CardTitle>{project.title}</CardTitle>
-                    {project.link && (
-                      <Link 
-                        href={project.link}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-muted-foreground hover:text-primary"
-                      >
-                        <ArrowUpRight className="h-5 w-5" />
-                      </Link>
-                    )}
-                  </div>
-                  <CardDescription className="text-base">{project.description}</CardDescription>
-                </CardHeader>
-                <CardContent className="pt-0">
-                  <p className="text-sm text-muted-foreground">
-                    {project.longDescription}
-                  </p>
-                  <div className="flex flex-wrap gap-2 mt-4">
-                    {project.tags.map((tag) => (
-                      <Badge key={tag} variant="secondary">
-                        {tag}
-                      </Badge>
-                    ))}
-                  </div>
-                </CardContent>
-              </div>
-              
-              {project.image && (
-                <div className="px-6 pb-6 lg:py-6 lg:w-1/3 md:px-24 lg:px-6">
-                  <div className="relative aspect-[4/3] w-full overflow-hidden">
-                    <Image
-                      src={project.image}
-                      alt={project.title}
-                      width={400}
-                      height={300}
-                      className="object-contain w-full h-full"
-                      priority={index === 0}
-                    />
-                  </div>
+        {loading ? (
+          <>
+            <CardSkeleton />
+            <CardSkeleton />
+            <CardSkeleton />
+          </>
+        ) : (
+          projects.map((project, index) => (
+            <Card key={index}>
+              <div className="flex flex-col lg:flex-row">
+                <div className="flex-1">
+                  <CardHeader className="pb-2">
+                    <div className="flex items-center justify-between">
+                      <CardTitle>{project.title}</CardTitle>
+                      {project.link && (
+                        <Link 
+                          href={project.link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-muted-foreground hover:text-primary"
+                        >
+                          <ArrowUpRight className="h-5 w-5" />
+                        </Link>
+                      )}
+                    </div>
+                    <CardDescription className="text-base">{project.description}</CardDescription>
+                  </CardHeader>
+                  <CardContent className="pt-0">
+                    <p className="text-sm text-muted-foreground">
+                      {project.longDescription}
+                    </p>
+                    <div className="flex flex-wrap gap-2 mt-4">
+                      {project.tags.map((tag) => (
+                        <Badge key={tag} variant="secondary">
+                          {tag}
+                        </Badge>
+                      ))}
+                    </div>
+                  </CardContent>
                 </div>
-              )}
-            </div>
-          </Card>
-        ))}
+                
+                {project.image && (
+                  <div className="px-6 pb-6 lg:py-6 lg:w-1/3 md:px-24 lg:px-6">
+                    <div className="relative aspect-[4/3] w-full overflow-hidden">
+                      <Image
+                        src={project.image}
+                        alt={project.title}
+                        width={400}
+                        height={300}
+                        className="object-contain w-full h-full"
+                        priority={index === 0}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            </Card>
+          ))
+        )}
       </div>
     </div>
   );

src/app/publications/page.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import { Badge } from "~/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
 import { Skeleton } from "~/components/ui/skeleton";
+import { CardSkeleton } from "~/components/ui/skeletons";
 import type { Publication } from "~/lib/bibtex";
 import { parseBibtex } from "~/lib/bibtex";
 
@@ -67,15 +68,11 @@ export default function PublicationsPage() {
 
       <div className="space-y-6">
         {loading ? (
-          <Card>
-            <CardHeader className="pb-2">
-              <Skeleton className="h-6 w-1/2" />
-            </CardHeader>
-            <CardContent>
-              <Skeleton className="h-4 w-full" />
-              <Skeleton className="h-4 w-full mt-2" />
-            </CardContent>
-          </Card>
+          <>
+            <CardSkeleton />
+            <CardSkeleton />
+            <CardSkeleton />
+          </>
         ) : (
           publications.map((pub, index) => (
             <Card key={index}>

src/components/Navigation.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useTheme } from 'next-themes';
 import { useState, useEffect } from 'react';
-import { Home, FolderGit2, FileText, BookOpenText, Menu, X, Sun, Moon } from 'lucide-react';
+import { Home, FolderGit2, FileText, BookOpenText, Menu, X, Sun, Moon, SunMoon } from 'lucide-react';
 
 // Define the nav items without icons
 const navItems = [
@@ -25,6 +25,10 @@ export function Navigation() {
     setMounted(true);
   }, []);
 
+  // Determine the icon to show based on the theme
+  const themeIcon = theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />;
+  const defaultThemeIcon =  <SunMoon size={20} />; // Default icon for server-side rendering
+
   return (
     <>
       {/* Backdrop overlay - faster fade */}
@@ -44,15 +48,14 @@ export function Navigation() {
               <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"
-                  aria-label="Toggle theme"
-                >
-                  {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
-                </button>
-              )}
+              {/* Render the theme icon as a placeholder */}
+              <button
+                onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+                className="text-sm font-medium text-muted-foreground hover:text-primary flex items-center lg:hidden"
+                aria-label="Toggle theme"
+              >
+                {mounted ? themeIcon : defaultThemeIcon} {/* Use the default icon for server-side rendering */}
+              </button>
               <button
                 onClick={() => setIsOpen(!isOpen)}
                 className="text-gray-500 hover:text-primary focus:outline-none relative h-6 w-6 lg:hidden"
@@ -80,15 +83,13 @@ 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"
-                  aria-label="Toggle theme"
-                >
-                  {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
-                </button>
-              )}
+              <button
+                onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+                className="ml-4 text-sm font-medium text-muted-foreground hover:text-primary flex items-center"
+                aria-label="Toggle theme"
+              >
+                {mounted ? themeIcon : defaultThemeIcon} {/* Use the default icon for server-side rendering */}
+              </button>
             </div>
           </div>
         </div>

src/components/ui/skeletons.tsx

@@ -0,0 +1,40 @@
+import { Card, CardContent, CardHeader } from "./card";
+import { Skeleton } from "./skeleton";
+
+export function CardSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-6 w-1/3" />
+          <Skeleton className="h-5 w-5 rounded-full" />
+        </div>
+        <Skeleton className="h-4 w-full mt-2" />
+      </CardHeader>
+      <CardContent>
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-5/6 mt-2" />
+        <div className="flex gap-2 mt-4">
+          <Skeleton className="h-5 w-16" />
+          <Skeleton className="h-5 w-16" />
+          <Skeleton className="h-5 w-16" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function AboutCardSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-6 w-1/4" />
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-3/4" />
+      </CardContent>
+    </Card>
+  );
+}