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"
				>
					<Icon
						icon="checkmark"
						class="include"
					/>

					<Icon
						icon="cross"
						class="exclude"
					/>

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

<script>
const tags = [
	'anal',
	'double-penetration',
	'gangbang',
];

export default {
	props: {
		filter: {
			type: Array,
			default: () => [],
		},
		compact: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			localFilter: this.filter,
			tags,
		};
	},
};
</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-weak);

		&:hover {
			cursor: pointer;
		}
	}

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

	.exclude:hover,
	.exclude.active {
		fill: var(--alert);
	}

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

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