From 4588a02203f3a9bb57e33c252b9715fbe31ada53 Mon Sep 17 00:00:00 2001
From: ygg2 <scyggdrasil@outlook.com>
Date: Fri, 4 Apr 2025 23:50:22 -0400
Subject: [PATCH] Sidebar adjustment

---
 src/webpage/style.css | 42 +++++++++++++++++++-----------------------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/webpage/style.css b/src/webpage/style.css
index 14a5410..c1af90a 100644
--- a/src/webpage/style.css
+++ b/src/webpage/style.css
@@ -513,18 +513,11 @@ textarea {
 ::-webkit-scrollbar-thumb:hover {
 	background: var(--primary-text-soft);
 }
-#sideContainDiv:empty {
-	width: 0px;
-	padding: 0;
-}
 #servers::-webkit-scrollbar,
 #channels::-webkit-scrollbar,
 #sideContainDiv::-webkit-scrollbar {
 	display: none;
 }
-#sideContainDiv {
-	width: 0;
-}
 #servers,
 #channels,
 #sideDiv {
@@ -1666,7 +1659,24 @@ img.bigembedimg {
 .acceptinvbutton:disabled {
 	background: color-mix(in hsl, var(--green) 80%, var(--black));
 }
+
+/* Sidebar */
+#sideContainDiv {
+	display: none;
+	flex: none;
+	width: 240px;
+	background: var(--sidebar-bg);
+	overflow-y: auto;
+}
+#sideDiv {
+	padding: 16px 8px;
+	box-sizing: border-box;
+}
+#page:has(#memberlisttoggle:checked) #sideContainDiv {
+	display: block;
+}
 #sideContainDiv.searchDiv {
+	display: block;
 	width: 30vw;
 	.topMessage {
 		margin-top: 2px;
@@ -1680,16 +1690,6 @@ img.bigembedimg {
 		background: #00000050;
 	}
 }
-/* Sidebar */
-#sideDiv {
-	flex: none;
-	padding: 16px 8px;
-	background: var(--sidebar-bg);
-	overflow-y: auto;
-	box-sizing: border-box;
-	flex-grow: 1;
-	flex-shrink: 1;
-}
 
 .memberList {
 	padding-bottom: 16px;
@@ -1719,10 +1719,6 @@ img.bigembedimg {
 	height: 16px;
 	width: 16px;
 }
-#page:has(#memberlisttoggle:checked) #sideContainDiv {
-	width: 240px;
-	flex-shrink: 0;
-}
 #page:has(#memberlisttoggle:checked) #memberlisttoggleicon span {
 	background: var(--primary-text-prominent);
 }
@@ -2382,7 +2378,7 @@ fieldset input[type="radio"] {
 		background: var(--primary-bg);
 		transition: left 0.3s;
 	}
-	#sideContainDiv {
+	#sideContainDiv, #sideContainDiv.searchDiv {
 		display: block;
 		right: -100svw;
 		width: 100svw;
@@ -2411,7 +2407,7 @@ fieldset input[type="radio"] {
 	#page:has(#maintoggle:checked) #mainarea {
 		left: 0;
 	}
-	#page:has(#memberlisttoggle:checked) #sideContainDiv {
+	#page:has(#memberlisttoggle:checked) #sideContainDiv, #sideContainDiv.searchDiv {
 		right: 0;
 	}
 	#page:has(#maintoggle:checked) #maintoggleicon {