From c753f1ef6512408fce1ee7a223aba81355ada0d0 Mon Sep 17 00:00:00 2001
From: Andy Burke <andy.burke@mailbox.earth>
Date: Tue, 16 Sep 2025 19:48:01 -0700
Subject: [PATCH] refactor: clean the sidebar up a little bit

---
 public/base.css             | 29 ++++++++++++++++++++
 public/sidebar/sidebar.html | 53 ++++++++++++++++++++++---------------
 2 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/public/base.css b/public/base.css
index ebe6948..98aca30 100644
--- a/public/base.css
+++ b/public/base.css
@@ -96,6 +96,35 @@ select {
 	font-size: inherit;
 }
 
+details > summary {
+	display: block;
+	position: relative;
+	padding-left: 2rem;
+	cursor: pointer;
+	user-select: none;
+}
+
+details > summary:before {
+	content: "";
+	border-width: 0.6rem;
+	border-style: solid;
+	border-color: transparent transparent transparent rgba(from var(--border-subtle) r g b / 0.9);
+	position: absolute;
+	top: 0.15rem;
+	left: 0;
+	transform: rotate(0);
+	transform-origin: 0.3rem 50%;
+	transition: 0.25s transform ease;
+}
+
+details[open] > summary:before {
+	transform: rotate(90deg);
+}
+
+details > summary::-webkit-details-marker {
+	display: none;
+}
+
 form input,
 form textarea {
 	width: 100%;
diff --git a/public/sidebar/sidebar.html b/public/sidebar/sidebar.html
index b6f552b..79831f3 100644
--- a/public/sidebar/sidebar.html
+++ b/public/sidebar/sidebar.html
@@ -210,9 +210,9 @@
 	</script>
 	<style type="text/css">
 		.profile-container {
-			margin: 1rem auto;
 			max-width: 1024px;
 			padding: 1rem;
+			padding-bottom: 0;
 		}
 
 		.profile-container .avatar-container {
@@ -351,31 +351,40 @@
 			<input type="file" accept="image/*" name="meta.avatar" />
 		</div>
 
-		<div class="username-container">
-			<span class="username" data-bind-to-user-field="username"></span>
-		</div>
+		<details class="additional-profile">
+			<summary>
+				<div class="username-container">
+					<span class="username" data-bind-to-user-field="username"></span>
+				</div>
+			</summary>
 
-		<div class="notifications-settings-container">
-			<button class="mockup" onclick="NOTIFICATIONS.request_permission()">
-				Enable Notifications
-			</button>
-		</div>
+			<div class="notifications-settings-container">
+				<button class="mockup" onclick="NOTIFICATIONS.request_permission()">
+					Enable Notifications
+				</button>
+			</div>
 
-		<div class="color-settings-container">
-			<input
-				type="text"
-				id="user-color-setting-primary"
-				name="meta.primary_color"
-				value=""
-				data-bind-to-user-field="meta.primary_color"
-				data-user-field-target="value"
-				data-user-field-default=""
-			/>
-			<label for="user-color-setting-primary">Primary Color</label>
-		</div>
+			<div class="color-settings-container">
+				<input
+					type="text"
+					id="user-color-setting-primary"
+					name="meta.primary_color"
+					value=""
+					data-bind-to-user-field="meta.primary_color"
+					data-user-field-target="value"
+					data-user-field-default=""
+				/>
+				<label for="user-color-setting-primary">Primary Color</label>
+			</div>
+		</details>
 	</form>
 
-	<form data-smart="true" data-method="DELETE" action="/api/auth">
+	<form
+		data-smart="true"
+		data-method="DELETE"
+		action="/api/auth"
+		style="position: absolute; left: 1rem; right: 1rem; bottom: 1rem"
+	>
 		<script>
 			{
 				const form = document.currentScript.closest("form");