Added navigation bar to tags page.

pages/tags/+Page.vue

@@ -1,63 +1,172 @@
 <template>
 	<div class="page">
-		<div
+		<ul
-			v-for="(tags, category) in categories"
+			ref="categories"
-			:key="`category-${category}`"
+			class="categories nolist"
 		>
-			<h3 class="category">{{ category }}</h3>
+			<li
+				v-for="(tags, category) in showcase"
+				:key="`category-${category}`"
+			>
+				<a
+					:href="`#${category}`"
+					class="category nolink"
+					:class="{ active: activeCategory === category }"
+				>{{ category }}</a>
+			</li>
+		</ul>
 
-			<ul class="tags nolist">
+		<div
-				<li
+			ref="content"
-					v-for="tag in tags"
+			class="content"
-					:key="`tag-${tag.slug}`"
+		>
-					class="tag"
+			<div
+				v-for="(tags, category) in showcase"
+				:key="`tags-${category}`"
+			>
+				<h3
+					:id="category"
+					class="category-heading"
+				>{{ category }}</h3>
+
+				<ul
+					class="tags nolist"
+					:data-category="category"
 				>
-					<div class="thumb-container">
+					<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}`"
+									: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="tag nolink"
+							class="name nolink"
-						>
+						>{{ tag.name }}</a>
-							<img
+					</li>
-								v-if="tag.poster"
+				</ul>
-								:src="`/${tag.poster.thumbnail}`"
+			</div>
-								: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>
 </template>
 
 <script setup>
-import { inject } from 'vue';
+import { ref, onMounted, inject } from 'vue';
+import navigate from '#/src/navigate.js';
 
 const pageContext = inject('pageContext');
-const categories = pageContext.pageProps.tagShowcase;
+const showcase = pageContext.pageProps.tagShowcase;
+
+const categories = ref(null);
+const content = ref(null);
+
+const activeCategory = ref(null);
+
+function calculateActiveCategory() {
+	activeCategory.value = Array.from(document.querySelectorAll('.tags')).reduce((closest, element) => {
+		const { top } = element.getBoundingClientRect();
+
+		if (!closest || Math.abs(top) < Math.abs(closest.top)) {
+			return { category: element.dataset.category, top };
+		}
+
+		return closest;
+	}, null).category;
+
+	const activeLink = document.querySelector(`a[href="#${activeCategory.value}"]`);
+
+	activeLink.scrollIntoView();
+
+	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);
+
+	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));
@@ -65,7 +174,7 @@ const categories = pageContext.pageProps.tagShowcase;
 	padding: .75rem 1rem;
 }
 
-.category {
+.category-heading {
 	padding: 1rem 1rem 0 1.5rem;
 	margin: 0;
 	text-transform: capitalize;

src/navigate.js

@@ -12,6 +12,8 @@ export default function navigate(path, query, options = {}) {
 
 	if (options.redirect) {
 		window.location.href = url;
+	} else if (options.replace) {
+		history.replaceState({}, '', url); // eslint-disable-line no-restricted-globals
 	} else {
 		history.pushState({}, '', url); // eslint-disable-line no-restricted-globals
 	}