gender-voice-visualization/ui/sidepane.html

<div class="current-tab"></div>
<div class="tab-set">
	<button class="details hbox iconic">{% include 'info-circle.svg' %} <span>Details</span></button>
	<button class="help iconic hbox">{% include 'question-circle.svg' %} <span>Help</span></button>
	<button class="settings iconic">⚙ Settings</button>
</div>
<style>
	button.hbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tab-set button.hbox span {
		line-height: calc(var(--header-height) - .5rem);
	}
	.tab-set button.hbox svg {
		padding-top: .1em;
	}
	.tab-set {
		position: absolute;
		bottom: 0px;
		height: calc(var(--header-height) - .5rem);
		display: flex;
		left: 0px;
		right: 0px;
		background: var(--button-background);
	}
	.wide-body .tab-set {
		right: 0px;
	}
	.tab-set button {
		transition: box-shadow .2s all;
		height: 100%;
		width: 100%;
		border-top: 1px solid var(--chrome-border);
		border-left: 1px solid var(--chrome-border);
		border-right: 0px;
		border-radius: 0px 0px var(--border-radius) var(--border-radius);
		background: var(--button-background);
		box-shadow: inset var(--box-shadow);
	}
	.current-tab {
		width: 100%;
		overflow: auto;
		height: calc(100% - 2em);
		border: 1px solid var(--chrome-border);
		border-bottom: 0px;
		border-right: 0px;
		padding: .5rem;
		padding-top: 0px;
		background: var(--chrome-background);
		transition: .3s transform;
		position: absolute;
	}
	.current-tab section {
		min-height: 100%;
	}
	.current-tab > section > *:first-child {
		height: 2em;
		line-height: 2em;
	}
	.tab-set button:disabled {
		border-top: 0px;
		opacity: 1;
		background: var(--chrome-background);
		color: var(--chrome-color);
		box-shadow: 2px 2px var(--shadow-spread) 2px rgba(0,0,0,0);
	}
	.narrow-body .current-tab.expanded {
		transform: translate(0, -60%);
		height: calc(200%);
		z-index: calc(var(--voice-graph-z-index) + 3);
	}
	#expand-collapse-button.expanded {
		transform: translate(0, -60%);
	}
</style>
<script>
	let tab = $('.current-tab');
	tab.addEventListener('click', evt => {
		let bb = tab.getBoundingClientRect();
		if (
			evt.clientY - bb.top < 20 && document.activeElement != $('#theme-select') &&
			evt.clientX - bb.left > (bb.right - bb.left) / 4 &&
			evt.clientX - bb.left < 3 * (bb.right - bb.left) / 4

		) {
			if (!tab.classList.contains('expanded')) {
				tab.classList.add('expanded');
			} else {
				tab.classList.remove('expanded');
			}
		}
	}, true);
	
	for (let tab of ['settings', 'help', 'details']) {
		let tabButton = $('button.' + tab);
		tabButton.addEventListener('click', evt => {
			for (let sibling of tabButton.parentNode.querySelectorAll('button')) {
				sibling.disabled = false;
			}
			clearSelector('.current-tab > section');
			tabButton.disabled = true;
			$('aside > .current-tab').appendChild($('section.' + tab));
		});
	}
</script>