diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx
index 0ec9b9a2a..d04e41451 100644
--- a/src/Components/Sidebar/index.jsx
+++ b/src/Components/Sidebar/index.jsx
@@ -128,20 +128,17 @@ function Sidebar() {
 		(state) => state.ui.distributedUptimeEnabled
 	);
 	const sidebarRef = useRef(null);
+	const [sidebarReady, setSidebarReady] = useState(!collapsed);
 
 	useEffect(() => {
-		const el = sidebarRef.current;
-		if (!el) return;
-	
-		const TRANSITION_DURATION = 200;
-	
 		if (!collapsed) {
+			setSidebarReady(false);
 			const timeout = setTimeout(() => {
-				el.classList.add("sidebar-ready");
-			}, TRANSITION_DURATION);
+				setSidebarReady(true);
+			}, 200);
 			return () => clearTimeout(timeout);
 		} else {
-			el.classList.remove("sidebar-ready");
+			setSidebarReady(false);
 		}
 	}, [collapsed]);