From 79cabb770aa88f55350e17e3e0d6f3200804d8e5 Mon Sep 17 00:00:00 2001
From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca>
Date: Mon, 7 Apr 2025 14:55:43 -0400
Subject: [PATCH 1/6] add sidebarReady state and update useffect

---
 src/Components/Sidebar/index.jsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

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]);	
 

From 58a51d8a3fdf1324c406243111e4e222948cb25d Mon Sep 17 00:00:00 2001
From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca>
Date: Mon, 7 Apr 2025 14:57:00 -0400
Subject: [PATCH 2/6] update sidebar stack classname to include sidebarReady

---
 src/Components/Sidebar/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx
index d04e41451..b81f889dd 100644
--- a/src/Components/Sidebar/index.jsx
+++ b/src/Components/Sidebar/index.jsx
@@ -211,7 +211,7 @@ function Sidebar() {
 		<Stack
 			component="aside"
 			ref={sidebarRef}
-			className={collapsed ? "collapsed" : "expanded"}
+			className={`${collapsed ? "collapsed" : "expanded"} ${sidebarReady ? "sidebar-ready" : ""}`}
 			/* TODO general padding should be here */
 			py={theme.spacing(6)}
 			gap={theme.spacing(6)}

From 8f92f8e97f155f80f9e0175e975c5b3153120650 Mon Sep 17 00:00:00 2001
From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca>
Date: Mon, 7 Apr 2025 14:59:00 -0400
Subject: [PATCH 3/6] update css to fix icon visibility

---
 src/Components/Sidebar/index.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Components/Sidebar/index.css b/src/Components/Sidebar/index.css
index 3dac59aba..51ede5a36 100644
--- a/src/Components/Sidebar/index.css
+++ b/src/Components/Sidebar/index.css
@@ -82,12 +82,12 @@ aside .MuiListSubheader-root {
 .sidebar-delay-fade {
 	opacity: 0;
 	visibility: hidden;
-	transition: opacity 0.3s ease;
 }
 
-aside.sidebar-ready .sidebar-delay-fade {
+aside.expanded.sidebar-ready .sidebar-delay-fade {
 	opacity: 1;
 	visibility: visible;
+	transition: opacity 0.3s ease;
 }
 
 @keyframes fadeIn {

From 2f97269de5e93e34ad076e47c2e4f755b2e10d9f Mon Sep 17 00:00:00 2001
From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca>
Date: Mon, 7 Apr 2025 15:21:37 -0400
Subject: [PATCH 4/6] move transition to sidebar-delay fade class

---
 src/Components/Sidebar/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Sidebar/index.css b/src/Components/Sidebar/index.css
index 51ede5a36..ef921acca 100644
--- a/src/Components/Sidebar/index.css
+++ b/src/Components/Sidebar/index.css
@@ -82,12 +82,12 @@ aside .MuiListSubheader-root {
 .sidebar-delay-fade {
 	opacity: 0;
 	visibility: hidden;
+	transition: opacity 0.3s ease;
 }
 
 aside.expanded.sidebar-ready .sidebar-delay-fade {
 	opacity: 1;
 	visibility: visible;
-	transition: opacity 0.3s ease;
 }
 
 @keyframes fadeIn {

From ac57e1ec27296f333b8440b876f5b4a050b5cd59 Mon Sep 17 00:00:00 2001
From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca>
Date: Mon, 7 Apr 2025 15:23:23 -0400
Subject: [PATCH 5/6] initialise sidebarReady state to false

---
 src/Components/Sidebar/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx
index b81f889dd..0d760661f 100644
--- a/src/Components/Sidebar/index.jsx
+++ b/src/Components/Sidebar/index.jsx
@@ -128,7 +128,7 @@ function Sidebar() {
 		(state) => state.ui.distributedUptimeEnabled
 	);
 	const sidebarRef = useRef(null);
-	const [sidebarReady, setSidebarReady] = useState(!collapsed);
+	const [sidebarReady, setSidebarReady] = useState(false);
 
 	useEffect(() => {
 		if (!collapsed) {

From 865140a2059fff07ba6e3117ff939e84e8944891 Mon Sep 17 00:00:00 2001
From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca>
Date: Mon, 7 Apr 2025 15:29:18 -0400
Subject: [PATCH 6/6] create sidebarClassName variable and update in jsx

---
 src/Components/Sidebar/index.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx
index 0d760661f..8d65acdde 100644
--- a/src/Components/Sidebar/index.jsx
+++ b/src/Components/Sidebar/index.jsx
@@ -129,13 +129,14 @@ function Sidebar() {
 	);
 	const sidebarRef = useRef(null);
 	const [sidebarReady, setSidebarReady] = useState(false);
+	const TRANSITION_DURATION = 200;
 
 	useEffect(() => {
 		if (!collapsed) {
 			setSidebarReady(false);
 			const timeout = setTimeout(() => {
 				setSidebarReady(true);
-			}, 200);
+			}, TRANSITION_DURATION);
 			return () => clearTimeout(timeout);
 		} else {
 			setSidebarReady(false);
@@ -205,13 +206,14 @@ function Sidebar() {
 	}, [location]);
 
 	const iconColor = theme.palette.primary.contrastTextTertiary;
+	const sidebarClassName = `${collapsed ? "collapsed" : "expanded"} ${sidebarReady ? "sidebar-ready" : ""}`;
 
 	/* TODO refactor this, there are a some ternaries and comments in the return  */
 	return (
 		<Stack
 			component="aside"
 			ref={sidebarRef}
-			className={`${collapsed ? "collapsed" : "expanded"} ${sidebarReady ? "sidebar-ready" : ""}`}
+			className={sidebarClassName}
 			/* TODO general padding should be here */
 			py={theme.spacing(6)}
 			gap={theme.spacing(6)}