traxxx-web/pages/users/@username/+Page.vue

<template>
	<div class="page">
		<div class="profile">
			<div class="profile-header">
				<div class="user">
					<img
						v-if="profile.avatar"
						:src="profile.avatar"
						class="avatar"
					>

					<h2 class="username ellipsis">{{ profile.username }}</h2>
				</div>

				<span class="age">{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
			</div>

			<nav
				v-if="profile.id === user?.id"
				class="domains nobar"
				@wheel.prevent="scrollHorizontal"
			>
				<a
					:href="`/user/${profile.username}/stashes`"
					class="domain nolink"
					:class="{ active: section === 'stashes' }"
				>Stashes</a>

				<a
					:href="`/user/${profile.username}/alerts`"
					class="domain nolink"
					:class="{ active: section === 'alerts' }"
				>Alerts</a>

				<a
					:href="`/user/${profile.username}/templates`"
					class="domain nolink"
					:class="{ active: section === 'templates' }"
				>Templates</a>

				<a
					:href="`/user/${profile.username}/revisions/scenes`"
					class="domain nolink"
					:class="{ active: section === 'revisions' && domain === 'scenes' }"
				>Scene Revisions</a>

				<a
					:href="`/user/${profile.username}/revisions/actors`"
					class="domain nolink"
					:class="{ active: section === 'revisions' && domain === 'actors' }"
				>Actor Revisions</a>
			</nav>

			<Stashes v-if="section === 'stashes'" />
			<Alerts v-if="section === 'alerts' && profile.id === user?.id" />

			<Summaries
				v-if="section === 'templates' && profile.id === user?.id"
				:release="mockupRelease"
			/>
		</div>

		<div
			v-if="section === 'revisions' && profile.id === user?.id"
			class="profile-section revisions"
		>
			<h3 class="section-header heading">{{ domain.slice(0, -1) }} Revisions</h3>
			<Revisions context="user" />
		</div>
	</div>
</template>

<script setup>
import { ref, inject } from 'vue';
import { formatDistanceStrict } from 'date-fns';

import Stashes from '#/components/stashes/stashes.vue';
import Alerts from '#/components/alerts/alerts.vue';
import Summaries from '#/components/scenes/summaries.vue';
import Revisions from '#/components/edit/revisions.vue';

const pageContext = inject('pageContext');

const section = pageContext.routeParams.section;
const domain = pageContext.routeParams.domain;

const user = pageContext.user;
const profile = ref(pageContext.pageProps.profile);

const mockupRelease = {
	id: 1,
	title: 'Nut For Human Consumption',
	effectiveDate: new Date(),
	actors: [
		{
			name: 'Chanel Chakra',
			gender: 'female',
		},
		{
			name: 'Mo The Fucker',
			gender: 'male',
		},
	],
	tags: [
		{ name: 'anal' },
		{ name: 'facefucking' },
		{ name: 'deepthroat' },
		{ name: 'blowjob' },
		{ name: 'facial' },
	],
	movies: [{
		title: 'Best Of Traxxx 23',
	}],
	channel: {
		name: 'Traxxxed',
	},
	network: {
		name: 'Traxxx',
	},
};

function scrollHorizontal(event) {
	event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
}
</script>

<style>
.profile-section {
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .5rem 1rem;
		text-transform: capitalize;

		.button {
			margin-left: 1rem;
		}
	}

	.heading {
		margin: 0;
		font-size: 1.1rem;
		color: var(--primary);
	}
}

@media(--small-20) {
	.profile-section .section-header {
		padding: .5rem;
	}
}
</style>

<style scoped>
.page {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
	background: var(--background-base-10);
}

.profile {
	display: flex;
	flex-direction: column;
	width: 1200px;
	max-width: 100%;
	margin: 0 .5rem;
}

.profile-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .5rem 1rem;
    color: var(--highlight-strong-30);
    background: var(--shadow-strong-30);
	border-radius: 0 0 .5rem .5rem;
}

.user {
	display: flex;
	overflow: hidden;
}

.username {
	margin: 0;
	font-size: 1.25rem;
}

.age {
	display: flex;
	flex-shrink: 0;
	font-size: .9rem;

	.icon {
		width: .9rem;
		fill: var(--highlight-strong-20);
		margin-right: .75rem;
		transform: translateY(-1px);
	}
}

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

.domains {
	display: flex;
	gap: .5rem;
	padding: .5rem 0;
	margin-top: .25rem;
	overflow-x: auto;
}

.domain {
	flex-shrink: 0;
	color: var(--glass-strong-20);
	background: var(--background-dark-20);
	padding: .5rem 1rem;
	border-radius: 1rem;
	font-size: .9rem;
	font-weight: bold;

	&.active {
		background: var(--primary);
		color: var(--text-light);
	}
}

.revisions {
	width: 100%; /* necessary for FF */
	box-sizing: border-box;
	padding: 0 1rem;
}

.revisions-nav {
	display: flex;
	gap: 1rem;
}

@media(--compact) {
	.domains {
		padding: .5rem 1rem;
	}

	.profile {
		margin: 0;
	}

	.profile-header {
		border-radius: 0;
	}
}

@media(--small-20) {
	.profile-header {
		padding: .5rem;
	}

	.domains {
		padding: .5rem .5rem;
	}

	.age .icon {
		display: none;
	}
}

@media(--small-30) {
	.age .icon {
		display: none;
	}
}

@media(--small-50) {
	.age {
		display: none;
	}
}
</style>