traxxx-web/pages/tags/+Page.vue

<template>
	<div class="page">
		<ul
			ref="categories"
			class="categories nolist"
		>
			<li
				v-for="(tags, category) in showcase"
				:key="`category-${category}`"
			>
				<a
					:href="`#${category}`"
					class="category nolink"
					:class="{ active: activeCategory === category }"
				>{{ category }}</a>
			</li>
		</ul>

		<div
			ref="content"
			class="content"
		>
			<div
				v-for="(tags, category) in showcase"
				:key="`tags-${category}`"
			>
				<h3
					:id="category"
					class="category-heading"
				>{{ categoryTitles[category] || category }}</h3>

				<ul
					class="tags nolist"
					:data-category="category"
				>
					<li
						v-for="tag in tags"
						:key="`tag-${tag.slug}`"
						class="tag"
					>
						<div class="thumb-container">
							<a
								:href="`/tag/${tag.slug}`"
								class="tag nolink"
							>
								<img
									v-if="tag.poster"
									:src="`/${tag.poster.thumbnail}`"
									:style="{ 'background-image': `url(/${tag.poster.lazy})` }"
									:title="tag.poster.comment"
									class="thumb"
									loading="lazy"
								>
							</a>

							<a
								v-if="tag.poster?.entity"
								:href="`/${tag.poster.entity.type}/${tag.poster.entity.slug}`"
								class="favicon-link"
							>
								<img
									:src="!tag.poster.entity.parent || tag.poster.entity.isIndependent ? `/logos/${tag.poster.entity.slug}/favicon.png` : `/logos/${tag.poster.entity.parent.slug}/favicon.png`"
									:alt="tag.poster.entity.name"
									:title="tag.poster.entity.name"
									class="favicon"
								>
							</a>
						</div>

						<a
							:href="`/tag/${tag.slug}`"
							class="name nolink"
						>{{ tag.name }}</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
import navigate from '#/src/navigate.js';

const pageContext = inject('pageContext');
const showcase = pageContext.pageProps.tagShowcase;

const categories = ref(null);
const content = ref(null);

const categoryTitles = {
	lgbt: 'LGBT',
};

const activeCategory = ref(null);

function calculateActiveCategory() {
	const newCategory = Array.from(document.querySelectorAll('.tags')).reduce((closest, element) => {
		const { top } = element.getBoundingClientRect();

		if (!closest || Math.abs(top - 200) < Math.abs(closest.top)) { // slight offset to include bottom category
			return { category: element.dataset.category, top };
		}

		return closest;
	}, null).category;

	if (newCategory === activeCategory.value) {
		return;
	}

	activeCategory.value = newCategory;

	const activeLink = document.querySelector(`a[href="#${activeCategory.value}"]`);

	activeLink.scrollIntoView({
		inline: 'center',
	});

	navigate(`#${activeCategory.value}`, null, { replace: true });
}

onMounted(() => {
	// div doesn't scroll automatically on page load, reset hash to scroll
	if (window.location.hash) {
		const hash = window.location.hash;

		window.location.hash = undefined;
		window.location.hash = hash;
	}

	categories.value.addEventListener('wheel', (event) => {
		categories.value.scrollLeft += event.deltaY;
	});

	content.value.addEventListener('scroll', () => calculateActiveCategory());

	window.addEventListener('popstate', () => {
		if (window.location.hash) {
			const categoryTitle = document.querySelector(window.location.hash);

			activeCategory.value = window.location.hash.slice(1);
			categoryTitle?.scrollIntoView();
		}
	});

	calculateActiveCategory();
});
</script>

<style scoped>
.page {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.content {
	flex-grow: 1;
	overflow-y: auto;
}

.categories {
	display: flex;
	gap: .25rem;
	flex-shrink: 0;
	padding: .5rem 1rem;
	background: var(--grey-dark-40);
	overflow-x: auto;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}
}

.category {
	padding: .25rem .5rem;
	border-radius: .25rem;
	background: var(--grey-dark-30);
	color: var(--highlight-strong-30);
	font-weight: bold;
	font-size: .9rem;

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

.tags {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem .5rem;
	padding: .75rem 1rem;
}

.category-heading {
	padding: 1rem 1rem 0 1.5rem;
	margin: 0;
	text-transform: capitalize;
	color: var(--shadow);
}

.tag {
	display: flex;
	flex-direction: column;

	&:hover {
		.name {
			color: var(--primary);
		}

		.thumb {
			box-shadow: 0 0 3px var(--shadow-weak-10);
		}
	}
}

.name {
	padding: .25rem .5rem 0 .5rem;
	text-transform: capitalize;
	font-size: .9rem;
	font-weight: bold;
	color: var(--shadow-strong-10);
}

.thumb-container {
	position: relative;
}

.thumb {
	display: inline-block;
    width: 100%;
	aspect-ratio: 5/3;
	object-fit: cover;
	border-radius: .25rem;
	background-size: cover;
	background-position: center;
    box-shadow: 0 0 3px var(--shadow-weak-20);
}

.favicon-link {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 0;

	&:hover .favicon {
		filter: drop-shadow(0 0 2px var(--shadow-weak-20))
	}
}

.favicon {
	width: 1rem;
	height: 1rem;
	padding: .5rem;
	object-fit: contain;
}

@media(--compact) {
	.tags {
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	}
}

@media(--small-30) {
	.tags {
		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	}
}
</style>