Added movies page to actors, entities and tags.

components/domains/domains.vue

@@ -1,7 +1,8 @@
 <template>
 	<nav class="domains">
 		<Link
-			:href="getPath('scenes')"
+			v-if="domains.includes('scenes')"
+			:href="`${path}/scenes`"
 			class="domain domain-scenes nolink"
 			:active="domain === 'scenes'"
 		>
@@ -10,7 +11,8 @@
 		</Link>
 
 		<Link
-			:href="getPath('actors')"
+			v-if="domains.includes('actors')"
+			:href="`${path}/actors`"
 			class="domain domain-actors nolink"
 			:active="domain === 'actors'"
 		>
@@ -19,7 +21,8 @@
 		</Link>
 
 		<Link
-			:href="getPath('movies')"
+			v-if="domains.includes('movies')"
+			:href="`${path}/movies`"
 			class="domain domain-movies nolink"
 			:active="domain === 'movies'"
 		>
@@ -30,20 +33,24 @@
 </template>
 
 <script setup>
-const props = defineProps({
+defineProps({
 	stash: {
 		type: Object,
 		default: null,
 	},
+	path: {
+		type: String,
+		default: '',
+	},
+	domains: {
+		type: Array,
+		default: () => ['scenes', 'actors', 'movies'],
+	},
 	domain: {
 		type: String,
 		default: 'scenes',
 	},
 });
-
-function getPath(targetDomain) {
-	return `/stash/${props.stash.user.username}/${props.stash.slug}/${targetDomain}`;
-}
 </script>
 
 <style scoped>
@@ -52,10 +59,30 @@ function getPath(targetDomain) {
 	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);
@@ -82,7 +109,7 @@ function getPath(targetDomain) {
 	transform: translateY(1px);
 }
 
-.domains-bar {
+.domains-bar:not(.light) {
 	background: var(--grey-dark-50);
 	box-shadow: inset 0 0 3px var(--shadow);
 }

components/stashes/stash.vue

@@ -16,8 +16,8 @@
 			</h2>
 
 			<Domains
-				:stash="stash"
 				:domain="domain"
+				:path="`/stash/${stash.user.username}/${stash.slug}`"
 				class="domains-header"
 			/>
 
@@ -33,8 +33,8 @@
 		</div>
 
 		<Domains
-			:stash="stash"
 			:domain="domain"
+			:path="`/stash/${stash.user.username}/${stash.slug}`"
 			class="domains-bar"
 		/>
 
@@ -47,7 +47,7 @@
 <script setup>
 import { inject } from 'vue';
 
-import Domains from './domains.vue';
+import Domains from '#/components/domains/domains.vue';
 
 const pageContext = inject('pageContext');
 const { routeParams } = pageContext;