From b5bf1dbc87cd75d92889b6898a3a21ca0e80c065 Mon Sep 17 00:00:00 2001
From: Narendran M <narendranmurali2001@gmail.com>
Date: Sun, 2 Nov 2025 18:54:28 +0530
Subject: [PATCH] React hydration fix

---
 frontend/components/layout/Sidebar.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/components/layout/Sidebar.tsx b/frontend/components/layout/Sidebar.tsx
index 1786640..ca61bec 100644
--- a/frontend/components/layout/Sidebar.tsx
+++ b/frontend/components/layout/Sidebar.tsx
@@ -2,6 +2,7 @@
 
 import React from 'react';
 import Link from 'next/link';
+import { useEffect, useState } from 'react';
 import { usePathname } from 'next/navigation';
 import {
   HomeIcon,
@@ -59,9 +60,23 @@ const navigation: NavSection[] = [
 ];
 
 export const Sidebar: React.FC = () => {
+
+  // Add state to handle client-side rendering
+  const [isMounted, setIsMounted] = useState(false);
+  
+  // Use useEffect to mark component as mounted
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   const pathname = usePathname();
   const { collapsed, toggleSidebar } = useSidebar();
 
+  // Return null or loading state until mounted
+  if (!isMounted) {
+    return <aside className="fixed left-0 top-0 h-screen w-[280px] bg-white dark:bg-slate border-r border-gray-200 dark:border-slate-light" />;
+  }
+
   return (
     <aside
       className={cn(