fix hydration in theme toggle

Author: Shitanshukumar607

components/NavbarComponents/ThemeToggle.tsx

@@ -2,10 +2,15 @@
 
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export default function ThemeToggle() {
   const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
@@ -19,6 +24,8 @@ export default function ThemeToggle() {
     return () => window.removeEventListener("keydown", handleKeyPress);
   }, [theme, setTheme]);
 
+  if (!mounted) return null;
+
   return (
     <button
       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}