autonomous.contact/public/tabs/tabs.html

<script>
	document.addEventListener("view_changed", ({ detail: { view } }) => {
		const target_tab = document.querySelector(`.tab-switch[data-view="${view}"]`);

		if (target_tab) {
			target_tab.click();
		}
	});

	document.addEventListener("DOMContentLoaded", () => {
		const tab_switchers = document.querySelectorAll(".tab-switch");
		for (const tab_switch of tab_switchers) {
			tab_switch.addEventListener("input", (event) => {
				const tab_selector = event.target;
				const view = tab_selector.dataset.view;
				if (view) {
					window.location.hash = `/topic/${document.body.dataset.topic}/${view}`;
				}
			});
		}
	});
</script>
<style>
	.tabs-container {
		position: relative;
		height: 100%;
	}

	.tabs {
		position: relative;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}

	.tabs::before,
	.tabs::after {
		content: "";
		display: table;
	}

	.tabs::after {
		clear: both;
	}

	.tab {
	}

	.tab-switch {
		display: none;
	}

	.tab-label {
		position: relative;
		width: 6rem;
		height: 5rem;
		cursor: pointer;
		transition: all 0.25s;

		display: flex;
		align-items: center;
		justify-content: end;
		flex-direction: column;
	}

	.tab-label .label {
		margin: 0.75rem 0;
	}

	.tab-content {
		position: absolute;
		z-index: 1;
		top: 5rem;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		transition: all 0.35s;
		border-top: 1px solid var(--border-subtle);
		margin-top: 1px;
	}

	.tab-switch,
	.tab-switch + .tab-label {
		transition: none;
	}

	.tab-switch:checked + .tab-label {
		margin-top: 1px;
		border-bottom: 1px solid var(--accent);
		z-index: 1;
	}

	.tab-switch:checked + label + .tab-content {
		z-index: 2;
		opacity: 1;
	}

	@media screen and (max-width: 800px) {
		.tab-label {
			width: 3rem;
		}

		.tab-label .label {
			font-size: small;
		}
	}

	@media screen and (max-width: 400px) {
		.tab-label {
			width: 2.5rem;
		}

		.tab-label .label {
			font-size: 8px;
		}
	}
</style>

<div class="tabs">
	<!-- #include file="./chat/chat.html" -->
	<!-- #include file="./live/live.html" -->
	<!-- #include file="./blurbs/blurbs.html" -->
	<!-- #include file="./forum/forum.html" -->
	<!-- #include file="./essays/essays.html" -->
	<!-- #include file="./calendar/calendar.html" -->
</div>