traxxx/assets/components/header/filters.vue

<template>
	<v-popover class="filters">
		<div class="applied">Anal</div>

		<div slot="popover">
			<ul class="tags nolist">
				<li
					v-for="tag in tags"
					:key="`tag-${tag}`"
					class="tag"
					:class="{ selected: selectedTags.has(tag) }"
				>
					<router-link :to="{ params: { range: getNewRange(tag) } }">
						<Icon
							icon="checkmark"
							class="include"
						/>
					</router-link>

					<router-link
						:to="{ params: { range: tag } }"
						class="name"
					>{{ tag }}</router-link>
				</li>
			</ul>
		</div>
	</v-popover>
</template>

<script>
const tags = [
	'airtight',
	'anal',
	'blowjob',
	'double-penetration',
	'facial',
	'gangbang',
	'lesbian',
	'mff',
	'mfm',
	'orgy',
];

function getNewRange(tag) {
	const selected = new Set(this.selectedTags).add(tag);

	if (this.selectedTags.has(tag)) {
		selected.delete(tag);
	}

	return Array.from(selected).join('+');
}

function selectedTags() {
	return new Set(this.$route.params.range.split('+'));
}

export default {
	props: {
		filter: {
			type: Array,
			default: () => [],
		},
		compact: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			tags,
		};
	},
	computed: {
		selectedTags,
	},
	methods: {
		getNewRange,
	},
};
</script>

<style lang="scss" scoped>
@import 'theme';

.applied {
	padding: .5rem 1rem;
	font-size: 1rem;
}

.tags {
	padding: .5rem 0;
}

.tag {
	display: flex;
	align-items: center;
	padding: 0 .5rem;

	.icon:hover,
	.name:hover {
		background: var(--darken-hint);
	}

	.icon {
		width: 1rem;
		height: 1rem;
		padding: .5rem;
		fill: var(--darken-hint);

		&:hover {
			cursor: pointer;
		}
	}

	.include:hover,
	&.selected .include {
		fill: var(--success);
	}

	.name {
		flex-grow: 1;
		padding: .5rem;
		color: var(--text);
		text-decoration: none;
	}

	&:hover {
		background: var(--darken-hint);
		cursor: pointer;
	}
}
</style>