traxxx-web/components/admin/admin.vue

<template>
	<div class="page">
		<nav class="nav">
			<ul class="nav-items nolist">
				<li class="nav-item">
					<a
						href="/admin/revisions/scenes"
						class="nav-link nolink"
						:class="{ active: pageContext.routeParams.section === 'revisions' && pageContext.routeParams.domain === 'scenes' }"
					>Scene Revisions</a>
				</li>

				<li class="nav-item">
					<a
						href="/admin/revisions/actors"
						class="nav-link nolink"
						:class="{ active: pageContext.routeParams.section === 'revisions' && pageContext.routeParams.domain === 'actors' }"
					>Actor Revisions</a>
				</li>
			</ul>
		</nav>

		<div class="content">
			<slot />
		</div>
	</div>
</template>

<script setup>
import { inject } from 'vue';

const pageContext = inject('pageContext');
</script>

<style scoped>
.page {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	background: var(--background-base-10);
}

.nav {
	display: flex;
	padding: 1rem 1rem .75rem 1rem;
	border-bottom: solid 1px var(--shadow-weak-30);
	margin-bottom: .25rem;
	overflow-x: auto;
}

.nav-items {
	display: flex;
	gap: .5rem;
}

.nav-item {
	display: block;
	flex-shrink: 0;
	background: var(--background-dark-20);
	border-radius: 1rem;
	color: var(--glass-strong-20);
	font-size: .9rem;
	font-weight: bold;
}

.nav-link {
	display: block;
	padding: .5rem 1rem;
	font-weight: bold;

	&.active {
		color: var(--primary);
	}

	&:hover {
		color: var(--primary);
	}
}

.content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 1rem;
}
</style>