Implement togglable sidebars for narrow viewports

Closed: https://l.sr.ht/96AD.jpg
Open:   https://l.sr.ht/gr_9.jpg

style.css

@@ -2,6 +2,9 @@
 	--main-background: white;
 	--main-color: black;
 	--sidebar-background: #e3e3e3;
+	--expander-background: #b5b5b5;
+	--expander-background-hover: #a6a6a6;
+	--expander-border: #6c6c6c;
 	--green: green;
 
 	--gray: #4a4a4a;
@@ -12,6 +15,8 @@
 		--main-background: #212529;
 		--main-color: #f8f9fa;
 		--sidebar-background: #131618;
+		--expander-background: #424446;
+		--expander-background-hover: #2a2d2f;
 		--green: #53b266;
 
 		--red: #fb615b;
@@ -32,7 +37,7 @@ body {
 	font-family: monospace;
 }
 
-#buffer-list, #buffer, #connect, #member-list {
+#buffer, #connect {
 	color: var(--main-color);
 	background: var(--main-background);
 	width: 100%;
@@ -41,13 +46,43 @@ body {
 	overflow-y: auto;
 }
 
-#buffer-list {
+#buffer-list, #member-list {
+	color: var(--main-color);
+	background: var(--main-background);
+	width: 100%;
+	height: 100%;
+
 	background-color: var(--sidebar-background);
 	grid-column: 1;
 	grid-row: 1 / 4;
 
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+}
+
+.expander {
+	visibility: collapse;
+	cursor: pointer;
+	padding: 0;
+	margin: 0;
+	background: var(--expander-background);
+	transition: background 0.25s linear;
+	border: none;
+	width: 10px;
+}
+
+.expander:hover {
+	background: var(--expander-background-hover);
+}
+
+.expander span {
+	display: block;
+	width: 100%;
+	height: 2px;
+	margin-bottom: 2px;
+	border-style: solid;
+	border-width: 1px 0;
+	border-color: var(--expander-border);
 }
 
 #buffer-list ul {
@@ -55,6 +90,8 @@ body {
 	margin: 0;
 	padding: 0;
 	flex: 1 0 auto;
+	overflow-x: hidden;
+	overflow-y: auto;
 }
 #buffer-list li a {
 	display: inline-block;
@@ -108,21 +145,46 @@ body {
 	grid-column: 2;
 }
 
-#member-list-header {
-	grid-row: 1;
+#member-list {
+	grid-row: 1 / 4;
 	grid-column: 3;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+}
+
+#member-list > section {
+	display: flex;
+	flex-direction: column;
+}
+
+#member-list-header {
 	border-left: 1px solid var(--sidebar-background);
 }
-#member-list {
-	grid-row: 2;
-	grid-column: 3;
-	border-left: 1px solid var(--sidebar-background);
+
+@media(max-width: 640px) {
+	#buffer-list ul {
+		width: 0px;
+	}
+
+	#buffer-list.expand {
+		z-index: 999;
+		grid-column: 1 / 4;
+	}
+
+	#buffer-list.expand ul {
+		width: auto;
+	}
 }
 
 #member-list ul {
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
+	flex-grow: 1;
+	overflow-x: hidden;
+	overflow-y: auto;
 }
 #member-list li a {
 	display: inline-block;
@@ -135,7 +197,7 @@ body {
 	color: var(--main-color);
 	background: var(--main-background);
 	grid-row: 3;
-	grid-column: 2 / 4;
+	grid-column: 2 / 3;
 	border-top: 1px solid var(--sidebar-background);
 }
 #composer input {
@@ -471,3 +533,31 @@ kbd {
 		box-shadow: inset 0 -1px 0 var(--outline-color);
 	}
 }
+
+@media(max-width: 640px) {
+	.expander {
+		visibility: visible;
+	}
+
+	#buffer-list ul, #member-list > section {
+		width: 0px;
+	}
+
+	#buffer-list.expand, #member-list.expand {
+		z-index: 999;
+		grid-column-start: 1;
+		grid-column-end: 4;
+	}
+
+	#buffer-list.expand ul {
+		width: auto;
+	}
+
+	#member-list.expand > section {
+		width: 100%;
+	}
+
+	#member-list-header {
+		border-left: none;
+	}
+}