add transition to server members

public/styles.css

@@ -305,14 +305,15 @@ a {
 
 .members {
 	display: flex;
+	transition: all 0.3s ease; /* Smooth transition for expanding effect */
 	align-items: flex-start;
 	flex-direction: column;
 	justify-content: flex-start;
 	background: #3a3b3e; /* Base color matching the chat panel */
 	background-color: rgb(30, 30, 30);
 	border-radius: 15px; /* Consistent with the chat panel */
 	height: 97%; /* Adjust this if needed */
-	width: auto; /* Allow the width to grow with content */
+	width: 100px; /* Allow the width to grow with content */
 	margin-left: 10px;
 	padding: 25px; /* Padding to match the chat panel */
 	overflow-y: auto; /* Enable vertical scrolling if content overflows */
@@ -335,13 +336,14 @@ a {
 	overflow: hidden;
 
 	/* Smooth transition for hover interactions */
-	transition: box-shadow 0.3s ease;
+	transition: width 0.3s ease, box-shadow 0.3s ease; /* Add width to the transition properties */
 }
 
 .members:hover {
 	/* Slightly lighter inset shadows on hover for a subtle interactive effect */
 	box-shadow: inset 0 10px 10px rgba(255, 255, 255, 0.3),
 		inset 0 -10px 10px rgba(0, 0, 0, 0.3), 0 10px 25px rgba(0, 0, 0, 0.7);
+	width: 280px; /* Expanded width to accommodate username visibility */
 }
 
 pre {
@@ -393,8 +395,7 @@ pre {
 	overflow: hidden;
 }
 
-.servers,
-.members {
+.servers {
 	flex-shrink: 0; /* Prevents these elements from shrinking */
 }
 
@@ -480,7 +481,7 @@ pre {
 .files {
 	display: flex;
 	flex-direction: column;
-	align-items: center; /* This will center the child elements */
+	align-items: flex-start; /* This will center the child elements */
 	padding: 0 10px; /* Add padding inside the .files container */
 }
 
@@ -497,8 +498,23 @@ pre {
 
 .member-entry {
 	display: flex;
-	align-items: flex-end;
 	margin-bottom: 1rem;
+	align-items: center; /* Align the picture and username */
+	justify-content: flex-start;
+}
+
+.member-entry .h6.text-white.mb-4 {
+	opacity: 0; /* Start fully transparent */
+	max-height: 0; /* Start fully collapsed */
+	overflow: hidden; /* Prevent content from showing when collapsed */
+	transition: opacity 0.3s ease, max-height 0.3s ease; /* Smooth transition for both properties */
+	margin-left: 10px; /* Space between the picture and the username */
+}
+
+.members:hover .h6.text-white.mb-4 {
+	opacity: 1; /* End fully opaque */
+	max-height: 30px; /* Adjust based on the content's size */
+	visibility: visible; /* Ensure the element becomes interactable */
 }
 
 .member-pfp {
@@ -798,6 +814,15 @@ button:active {
 	);
 	border: 1px solid #4a5b4e; /* Subtle border for depth */
 	margin-left: 10px; /* Add some space between the button and the input */
+	opacity: 0; /* Initial state - fully transparent */
+	visibility: hidden; /* Hide the button initially */
+	transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Transition for opacity and delay hiding */
+}
+
+.members:hover #copyInviteBtn {
+	opacity: 1; /* Final state - fully visible */
+	visibility: visible; /* Make the button visible on hover */
+	transition-delay: 0s; /* Apply transition immediately when hovering */
 }
 
 #emoji-search-results span {

views/partials/members.ejs

@@ -48,4 +48,17 @@
 			}
 		);
 	}
+	let membersDiv = document.querySelector(".members");
+	let hoverTimeout;
+
+	membersDiv.addEventListener("mouseover", function () {
+		clearTimeout(hoverTimeout); // Cancel any pending shrink operation
+	});
+
+	membersDiv.addEventListener("mouseout", function () {
+		hoverTimeout = setTimeout(() => {
+			// This code will execute after 500ms of not hovering over the members div
+			// You can adjust the timeout to control the delay before the div shrinks back
+		}, 500);
+	});
 </script>