Improved stash page domain integration.

components/stashes/domains.vue

@@ -0,0 +1,105 @@
+<template>
+	<nav class="domains">
+		<Link
+			:href="getPath('scenes')"
+			class="domain domain-scenes nolink"
+			:active="domain === 'scenes'"
+		>
+			<Icon icon="clapboard-play" />
+			<span class="domain-label">Scenes</span>
+		</Link>
+
+		<Link
+			:href="getPath('actors')"
+			class="domain domain-actors nolink"
+			:active="domain === 'actors'"
+		>
+			<Icon icon="star" />
+			<span class="domain-label">Actors</span>
+		</Link>
+
+		<Link
+			:href="getPath('movies')"
+			class="domain domain-movies nolink"
+			:active="domain === 'movies'"
+		>
+			<Icon icon="movie" />
+			<span class="domain-label">Movies</span>
+		</Link>
+	</nav>
+</template>
+
+<script setup>
+const props = defineProps({
+	stash: {
+		type: Object,
+		default: null,
+	},
+	domain: {
+		type: String,
+		default: 'scenes',
+	},
+});
+
+function getPath(targetDomain) {
+	return `/stash/${props.stash.user.username}/${props.stash.slug}/${targetDomain}`;
+}
+</script>
+
+<style scoped>
+.domains {
+	display: flex;
+	justify-content: center;
+	gap: .5rem;
+	padding: 0 1rem;
+}
+
+.domain {
+	height: 100%;
+	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 {
+	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>

components/stashes/stash.vue

@@ -15,6 +15,12 @@
 				{{ stash.name }}
 			</h2>
 
+			<Domains
+				:stash="stash"
+				:domain="domain"
+				class="domains-header"
+			/>
+
 			<a
 				:href="`/user/${stash.user.username}`"
 				class="user nolink"
@@ -26,27 +32,13 @@
 			</a>
 		</div>
 
+		<Domains
+			:stash="stash"
+			:domain="domain"
+			class="domains-bar"
+		/>
+
 		<div class="content">
-			<nav class="domains">
-				<Link
-					:href="getPath('scenes')"
-					class="domain nolink"
-					:active="domain === 'scenes'"
-				>Scenes</Link>
-
-				<Link
-					:href="getPath('actors')"
-					class="domain nolink"
-					:active="domain === 'actors'"
-				>Actors</Link>
-
-				<Link
-					:href="getPath('movies')"
-					class="domain nolink"
-					:active="domain === 'movies'"
-				>Movies</Link>
-			</nav>
-
 			<slot />
 		</div>
 	</div>
@@ -55,15 +47,13 @@
 <script setup>
 import { inject } from 'vue';
 
+import Domains from './domains.vue';
+
 const pageContext = inject('pageContext');
 const { routeParams } = pageContext;
 
 const domain = routeParams.domain;
 const stash = pageContext.pageProps.stash;
-
-function getPath(targetDomain) {
-	return `/stash/${stash.user.username}/${stash.slug}/${targetDomain}`;
-}
 </script>
 
 <style scoped>
@@ -75,10 +65,11 @@ function getPath(targetDomain) {
 .header {
 	display: flex;
 	justify-content: space-between;
+	align-items: stretch;
 	position: sticky;
 	top: 0;
 	z-index: 1;
-	padding: .5rem 1rem;
+	padding: 0 1rem;
 	color: var(--text-light);
 	background: var(--grey-dark-40);
 	flex-shrink: 0;
@@ -89,6 +80,7 @@ function getPath(targetDomain) {
 	text-transform: capitalize;
 	display: flex;
 	align-items: center;
+	padding: .5rem 0;
 	font-size: 1.2rem;
 	margin-right: 1rem;
 
@@ -114,38 +106,28 @@ function getPath(targetDomain) {
 	border-radius: .25rem;
 }
 
+.domains-bar {
+	display: none;
+}
+
 .scenes-container {
 	overflow-y: auto;
 }
 
-.domains {
-	display: flex;
-	justify-content: center;
-	gap: .5rem;
-	padding: .5rem 1rem;
-	background: var(--background-base-10);
-	border-bottom: solid 1px var(--shadow-weak-40);
-}
-
-.domain {
-	box-sizing: border-box;
-	padding: .5rem 1rem;
-	background: var(--background-dark-20);
-	border-radius: 1rem;
-	color: var(--shadow);
-	font-size: .9rem;
-	font-weight: bold;
-
-	&.active {
-		background: var(--primary);
-		color: var(--text-light);
-	}
-}
-
 .content {
 	overflow-y: auto;
 }
 
+@media(--small) {
+	.domains-header {
+		display: none;
+	}
+
+	.domains-bar {
+		display: flex;
+	}
+}
+
 @media(--small-50) {
 	.title {
 		font-size: 1rem;