Added movies page to actors, entities and tags.

components/domains/domains.vue

@@ -0,0 +1,132 @@
+<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>