autonomous.contact/public/tabs/tabs.html

<script>
	window.addEventListener("locationchange", () => {
		const hash = window.location.hash?.slice(1);
		if (hash) {
			const target_tab = document.querySelector(`[data-hash="${hash}"]`);
			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 hash = tab_selector.dataset.hash;
				if (hash) {
					window.location.hash = hash;
				}
			});
		}
	});
</script>
<style>
	.tabs-container {
		position: relative;
		height: 100%;
	}

	.tabs {
		position: relative;
		height: 100%;
		width: 100%;
	}

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

	.tabs::after {
		clear: both;
	}

	.tab {
		float: left;
	}

	.tab-switch {
		display: none;
	}

	.tab-label {
		position: relative;
		width: 8rem;
		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;
		padding: 1rem 1rem 0 1rem;
		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: 4rem;
		}

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

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

		.tab-label .label {
			font-size: x-small;
		}
	}
</style>

<div class="tabs">
	<!-- #include file="./home.html" -->
	<!-- #include file="./talk.html" -->
	<!-- #include file="./exchange.html" -->
	<!-- #include file="./work.html" -->
	<!-- #include file="./resources.html" -->
	<!-- #include file="./calendar.html" -->
	<!-- #include file="./user.html" -->
</div>