traxxx-web/components/stashes/stash.vue

<template>
	<div class="stash">
		<div class="header">
			<h2 class="title">
				<Icon
					v-if="stash.primary"
					icon="heart7"
				/>

				<Icon
					v-else
					icon="box"
				/>

				{{ stash.name }}
			</h2>

			<a
				:href="`/user/${stash.user.username}`"
				class="user nolink"
			>
				<img
					:src="stash.user.avatar"
					class="avatar"
				><span class="userame ellipsis">{{ stash.user.username }}</span>
			</a>
		</div>

		<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>
</template>

<script setup>
import { inject } from '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>
.stash {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.header {
	display: flex;
	justify-content: space-between;
	padding: .5rem 1rem;
	color: var(--text-light);
	background: var(--grey-dark-40);
	flex-shrink: 0;
}

.title {
	margin: 0;
	text-transform: capitalize;
	display: flex;
	align-items: center;
	font-size: 1.2rem;
	margin-right: 1rem;

	.icon {
		width: 1.25rem;
		height: 1.25rem;
		margin-right: .75rem;
		fill: var(--text-light);
	}
}

.user {
	display: flex;
	align-items: center;
	font-weight: bold;
	overflow: hidden;
}

.avatar {
	width: 1.5rem;
	height: 1.5rem;
	margin-right: .75rem;
	border-radius: .25rem;
}

.scenes-container {
	overflow-y: auto;
}

.domains {
	display: flex;
	gap: .5rem;
	padding: .5rem 1rem;
}

.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-50) {
	.title {
		font-size: 1rem;

		.icon {
			width: 1rem;
			height: 1rem;
		}
	}

	.avatar {
		display: none;
	}
}
</style>