autonomous.contact/public/sidebar/sidebar.html

<script>
	document.addEventListener("topics_updated", ({ detail: { topics } }) => {
		const topic_list = document.getElementById("topic-list");
		topic_list.innerHTML = "";
		for (const topic of topics) {
			topic_list.insertAdjacentHTML(
				"beforeend",
				`<li id="topic-selector-${topic.id}" class="topic"><a href="#/topic/${topic.id}/chat">${topic.name}</a></li>`,
			);
		}
	});
</script>

<style type="text/css">
	main {
		position: relative;
		width: 100%;
		height: 100%;
		display: grid;
		grid-template-columns: auto 1fr;
	}
	@media screen and (max-width: 1200px) {
		main {
			grid-template-columns: auto;
		}
	}

	#sidebar {
		z-index: 100;
		background: var(--bg);
		position: relative;
		width: auto;
		left: 0;
		max-width: 32rem;
		padding: 0.5rem;
		transition: all ease-in-out 0.33s;
		border-right: 1px solid var(--border-subtle);
	}

	#sidebar #sidebar-toggle,
	#sidebar #sidebar-toggle-icon {
		opacity: 0;
		display: none;
	}

	@media screen and (max-width: 1200px) {
		#sidebar {
			position: absolute;
			top: 0;
			bottom: 0;
			transform: translateX(-100%);
		}

		#sidebar #sidebar-toggle-icon {
			opacity: 1;
			display: block;
			position: absolute;
			top: 0.9rem;
			right: -2.5rem;
			cursor: pointer;
			transition: all ease-in-out 0.33s;
			background: rgba(128, 128, 128, 0.5);
			border-radius: 0 1rem 1rem 0;
			padding: 0.5rem;
		}

		#sidebar .icon {
			transition: all ease-in-out 0.15s;
		}

		#sidebar:has(#sidebar-toggle:checked) {
			transform: translateX(0);
		}

		#sidebar:has(#sidebar-toggle:checked) #sidebar-toggle-icon {
			right: 0;
			rotate: 180deg;
		}
	}

	#sidebar .title {
		text-transform: uppercase;
		font-size: small;
		font-weight: bold;
		line-height: 2rem;
	}

	#sidebar #topic-creation-container {
		margin-top: 0.5rem;
	}

	#sidebar #topic-creation-container #toggle-topic-creation-form-button {
		transform: scale(0.8);
	}

	#sidebar .topic-list {
		list-style-type: none;
	}

	#sidebar .topic-list > li.topic a:before {
		position: absolute;
		left: -1.75rem;
		top: 0;
		font-weight: bold;
		font-size: x-large;
		content: "#";
		color: var(--text);
	}

	#sidebar .topic-list > li.topic a {
		position: relative;
		display: block;
		width: 100%;
		min-height: 1.5rem;
		line-height: 1.5rem;
		font-weight: bold;
		font-size: large;
		margin-left: 1.75rem;
		text-decoration: none;
	}

	#sidebar .topic-list > li.topic.active a {
		color: var(--accent);
	}
</style>

<div id="sidebar">
	<input type="checkbox" id="sidebar-toggle" />
	<label id="sidebar-toggle-icon" for="sidebar-toggle">
		<div class="icon right"></div>
	</label>
	<div>
		<span class="title">topics</span>
	</div>
	<ul id="topic-list" class="topic-list"></ul>
	<div id="topic-creation-container" data-requires-permission="topics.create">
		<button
			id="toggle-topic-creation-form-button"
			onclick="((event) => {
				event.preventDefault();
			 	const topic_create_form = document.getElementById( 'topic-create' );
				topic_create_form.style[ 'height' ] = topic_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
			})(event)"
		>
			<div class="icon plus"></div>
		</button>
		<form
			id="topic-create"
			data-smart="true"
			action="/api/topics"
			method="POST"
			style="
				margin-top: 1rem;
				width: 100%;
				overflow: hidden;
				height: 0;
				overflow: hidden;
				transition: all 0.5s;
			"
		>
			<input
				id="new-topic-name-input"
				type="text"
				name="name"
				value=""
				placeholder="new topic"
			/>

			<input type="submit" hidden />
			<script>
				{
					const form = document.currentScript.closest("form");
					const topic_create_form = document.getElementById("topic-create");
					const new_topic_name_input = document.getElementById("new-topic-name-input");

					form.on_reply = (new_topic) => {
						const topic_list = document.getElementById("topic-list");
						topic_list.insertAdjacentHTML(
							"beforeend",
							`<li id="topic-selector-${new_topic.id}" class="topic"><a href="#/topic/${new_topic.id}">${new_topic.name}</a></li>`,
						);

						new_topic_name_input.value = "";
						window.location.hash = `/topic/${new_topic.id}`;
						topic_create_form.style["height"] = "0";
					};
				}
			</script>
		</form>
	</div>
</div>