traxxx-web/components/domains/domains.vue

<template>
	<nav class="domains">
		<Link
			v-if="domains.includes('scenes')"
			:href="`${path}/scenes`"
			class="domain domain-scenes nolink"
			:active="domain === 'scenes'"
		>
			<Icon icon="clapboard-play" />
			<span class="domain-label">Scenes</span>
		</Link>

		<Link
			v-if="domains.includes('actors')"
			:href="`${path}/actors`"
			class="domain domain-actors nolink"
			:active="domain === 'actors'"
		>
			<Icon icon="star" />
			<span class="domain-label">Actors</span>
		</Link>

		<Link
			v-if="domains.includes('movies')"
			:href="`${path}/movies`"
			class="domain domain-movies nolink"
			:active="domain === 'movies'"
		>
			<Icon icon="movie" />
			<span class="domain-label">Movies</span>
		</Link>
	</nav>
</template>

<script setup>
defineProps({
	stash: {
		type: Object,
		default: null,
	},
	path: {
		type: String,
		default: '',
	},
	domains: {
		type: Array,
		default: () => ['scenes', 'actors', 'movies'],
	},
	domain: {
		type: String,
		default: 'scenes',
	},
});
</script>

<style scoped>
.domains {
	display: flex;
	justify-content: center;
	gap: .5rem;
	padding: 0 1rem;

	&.light .domain,
	&.light .domain {
		color: var(--glass-strong-10);

		.icon {
			fill: var(--glass-strong-10);
		}

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

			.icon {
				fill: var(--primary);
			}
		}
	}
}

.domain {
	height: 100%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: .75rem 1rem;
	color: var(--highlight-strong-10);
	font-size: .9rem;
	font-weight: bold;

	.icon {
		display: none;
		height: 1rem;
		fill: var(--highlight-strong-10);
	}

	&.active,
	&:hover {
		color: var(--text-light);

		.icon {
			fill: var(--text-light);
		}
	}
}

.domain-actors .icon {
	transform: translateY(1px);
}

.domains-bar:not(.light) {
	background: var(--grey-dark-50);
	box-shadow: inset 0 0 3px var(--shadow);
}

@media(--small-60) {
	.domains-bar {
		.domain {
			font-size: 0;
		}

		.domain .icon {
			display: inline-flex;
		}

		.domain-label {
			display: none;
		}
	}
}
</style>