From 2f1ce06b53cb3f5ec0cae18c768aa9173aad4343 Mon Sep 17 00:00:00 2001
From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca>
Date: Sun, 6 Apr 2025 15:08:32 -0400
Subject: [PATCH] add css for delaying fade-in

---
 src/Components/Sidebar/index.css | 11 +++++++++++
 src/Components/Sidebar/index.jsx |  1 +
 2 files changed, 12 insertions(+)

diff --git a/src/Components/Sidebar/index.css b/src/Components/Sidebar/index.css
index 58805c7f8..3dac59aba 100644
--- a/src/Components/Sidebar/index.css
+++ b/src/Components/Sidebar/index.css
@@ -79,6 +79,17 @@ aside .MuiListSubheader-root {
 	transition: padding 200ms ease;
 }
 
+.sidebar-delay-fade {
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.3s ease;
+}
+
+aside.sidebar-ready .sidebar-delay-fade {
+	opacity: 1;
+	visibility: visible;
+}
+
 @keyframes fadeIn {
 	0% {
 		opacity: 0;
diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx
index 91068a272..c3de1909d 100644
--- a/src/Components/Sidebar/index.jsx
+++ b/src/Components/Sidebar/index.jsx
@@ -743,6 +743,7 @@ function Sidebar() {
 							</Typography>
 						</Box>
 						<Stack
+							className="sidebar-delay-fade"
 							flexDirection={"row"}
 							marginLeft={"auto"}
 							columnGap={theme.spacing(2)}