From aa3e22d814bda1b8cdd87f4577077224948a0338 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Thu, 29 Jan 2026 14:56:02 +0000
Subject: [PATCH] Make sidebar collapse centered and overlapping

Fix some styling stuff that was being done via JavaScript that can be
done via selectors.
---
 scss/sidebar.scss                | 26 +++++++++++++++++++++++++-
 sync/template/authenticated.html |  2 --
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/scss/sidebar.scss b/scss/sidebar.scss
index ec0b015f..02167a32 100644
--- a/scss/sidebar.scss
+++ b/scss/sidebar.scss
@@ -103,10 +103,34 @@
 	font-size: 1.5rem;
 }
 
+#sidebarToggle {
+	position: absolute;
+	left: calc(250px - 15px);
+	top: 50%;
+	transform: translateY(-50%);
+	z-index: 1050;
+	width: 30px;
+	height: 30px;
+	border-radius: 50%;
+	border: 1px solid #dee2e6;
+	display: flex;
+	align-items: center;
+	transition: left 0.3s;
+	padding: 0;
+}
 #sidebarToggle i {
 	transition: transform 0.3s;
 }
 
-#sidebar.collapsed + #content #sidebarToggle i {
+#sidebar.collapsed > #sidebarToggle {
+    left: calc(70px - 15px);
+}
+
+#sidebar > #sidebarToggle i {
+	position: relative;
+	left: 5px;
+}
+
+#sidebar.collapsed > #sidebarToggle i {
 	transform: rotate(180deg);
 }
diff --git a/sync/template/authenticated.html b/sync/template/authenticated.html
index e4a47ed4..ba12bf54 100644
--- a/sync/template/authenticated.html
+++ b/sync/template/authenticated.html
@@ -28,8 +28,6 @@
 	document.getElementById('sidebarToggle').addEventListener('click', function() {
 		document.getElementById('sidebar').classList.toggle('collapsed');
 		document.getElementById('content').classList.toggle('expanded');
-		document.getElementById('sidebarToggleIcon').classList.toggle('bi-chevron-left');
-		document.getElementById('sidebarToggleIcon').classList.toggle('bi-chevron-right');
 	});
 </script>
 </body>