From 641539690aa2de718dd861437b18247de3e87eac Mon Sep 17 00:00:00 2001
From: karthikeyamadhavan123 <karthikeyadonnipad2005@gmail.com>
Date: Sat, 27 Sep 2025 18:47:55 +0530
Subject: [PATCH 1/3] Fix: Resolve hydration error caused by theme toggle
 component

---
 apps/web/src/components/theme-toggle.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index 8302a19c6..7accb914f 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -18,8 +18,8 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
       className="h-7"
       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
     >
-      <Sun className="!size-[1.1rem]" />
-      <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
+      {theme === "dark" ? <Sun className="!size-[1.1rem]" /> : <Moon className="!size-[1.1rem]" />}
+      {/* <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span> */}
     </Button>
   );
 }

From e7f488314ad9f07fac8d30710c70cbd04f0101a8 Mon Sep 17 00:00:00 2001
From: karthikeyamadhavan123 <karthikeyadonnipad2005@gmail.com>
Date: Sat, 27 Sep 2025 19:03:19 +0530
Subject: [PATCH 2/3] fix(theme): Resolve hydration error in ThemeToggle
 component

Uses the isClient state with useEffect to ensure the theme button is only rendered client-side, preventing the SSR/client mismatch when reading user preferences from localStorage.
---
 apps/web/src/components/theme-toggle.tsx | 30 ++++++++++++++++--------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index 7accb914f..724d1a520 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -1,8 +1,8 @@
 "use client";
-
 import { Button } from "./ui/button";
 import { Sun, Moon } from "lucide-react";
 import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
 
 interface ThemeToggleProps {
   className?: string;
@@ -10,16 +10,26 @@ interface ThemeToggleProps {
 
 export function ThemeToggle({ className }: ThemeToggleProps) {
   const { theme, setTheme } = useTheme();
+  const [isClient, setIsClient] = useState(false);
 
+  useEffect(() => {
+    setIsClient(true)
+  }, []) // this will see that the client side is rendered or not.
+  
+  // if the client side is rendered then only render the button
   return (
-    <Button
-      size="icon"
-      variant="text"
-      className="h-7"
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-    >
-      {theme === "dark" ? <Sun className="!size-[1.1rem]" /> : <Moon className="!size-[1.1rem]" />}
-      {/* <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span> */}
-    </Button>
+    <>
+      {
+        isClient && <Button
+          size="icon"
+          variant="text"
+          className="h-7"
+          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+        >
+          {theme === "dark" ? <Sun className="!size-[1.1rem]" /> : <Moon className="!size-[1.1rem]" />}
+          {/* <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span> */}
+        </Button>
+      } 
+    </>
   );
 }

From 5720a4e56ec836d5d2201abc27fe4610ee5a8408 Mon Sep 17 00:00:00 2001
From: karthikeyamadhavan123 <karthikeyadonnipad2005@gmail.com>
Date: Tue, 30 Sep 2025 10:59:26 +0530
Subject: [PATCH 3/3] fixed the hydration and navbar responsiveness problem on
 mobile screens

---
 apps/web/src/components/header.tsx       | 4 ++--
 apps/web/src/components/theme-toggle.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index f8877330d..a649f330a 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -22,8 +22,8 @@ export function Header() {
   );
 
   const rightContent = (
-    <nav className="flex items-center gap-2">
-      <div className="flex items-center gap-4">
+    <nav className="flex items-center gap-1 justify-center">
+      <div className="flex items-center gap-3">
         <Link href="/blog">
           <Button variant="text" className="text-sm p-0">
             Blog
diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index 724d1a520..e7c1a0f1e 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -27,7 +27,7 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
           onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
         >
           {theme === "dark" ? <Sun className="!size-[1.1rem]" /> : <Moon className="!size-[1.1rem]" />}
-          {/* <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span> */}
+          <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
         </Button>
       } 
     </>