Improved stash page domain integration.

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;