Added new tag filter stub.

assets/components/header/filters.vue

@@ -1,72 +1,41 @@
 <template>
-	<div :class="{ compact }">
-		<ul class="filters">
-			<li class="filter">
-				<label
-					class="toggle"
-					:class="{ active: !localFilter.includes('lesbian') }"
-				>
-					<input
-						v-model="localFilter"
-						value="lesbian"
-						type="checkbox"
-						class="check"
-						@change="$emit('set-filter', localFilter)"
-					>lesbian
-				</label>
-			</li>
+	<v-popover class="filters">
+		<div class="applied">Anal</div>
 
-			<li class="filter">
-				<label
-					class="toggle"
-					:class="{ active: !localFilter.includes('gay') }"
+		<div slot="popover">
+			<ul class="tags nolist">
+				<li
+					v-for="tag in tags"
+					:key="`tag-${tag}`"
+					class="tag"
 				>
-					<input
-						v-model="localFilter"
-						value="gay"
-						type="checkbox"
-						class="check"
-						@change="$emit('set-filter', localFilter)"
-					>gay
-				</label>
-			</li>
+					<Icon
+						icon="checkmark"
+						class="include"
+					/>
 
-			<li class="filter">
-				<label
-					class="toggle"
-					:class="{ active: !localFilter.includes('transsexual') }"
-				>
-					<input
-						v-model="localFilter"
-						value="transsexual"
-						type="checkbox"
-						class="check"
-						@change="$emit('set-filter', localFilter)"
-					>trans
-				</label>
-			</li>
-		</ul>
+					<Icon
+						icon="cross"
+						class="exclude"
+					/>
 
-		<ul class="filters">
-			<li class="filter">
-				<label
-					class="toggle"
-					:class="{ active: !localFilter.includes('anal') }"
-				>
-					<input
-						v-model="localFilter"
-						value="anal"
-						type="checkbox"
-						class="check"
-						@change="$emit('set-filter', localFilter)"
-					>anal
-				</label>
-			</li>
-		</ul>
-	</div>
+					<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: {
@@ -81,6 +50,7 @@ export default {
 	data() {
 		return {
 			localFilter: this.filter,
+			tags,
 		};
 	},
 };
@@ -89,54 +59,55 @@ export default {
 <style lang="scss" scoped>
 @import 'theme';
 
-.filters {
-    display: inline-block;
-    list-style: none;
-    padding: .5rem;
-    margin: 0;
-
-    &:not(:last-child) {
-        border-right: solid 1px var(--shadow-hint);
-    }
+.applied {
+	padding: .5rem 1rem;
+	font-size: 1rem;
 }
 
-.filter {
-    display: inline-block;
+.tags {
+	padding: .5rem 0;
 }
 
-.compact {
-    .filters {
-        padding: 0;
-        border: none;
-    }
+.tag {
+	display: flex;
+	align-items: center;
+	padding: 0 .5rem;
 
-    .filter {
-        margin: 0 0 1.5rem 0;
-    }
-}
+	.icon:hover,
+	.name:hover {
+		background: var(--darken-hint);
+	}
 
-.toggle {
-    color: var(--shadow);
-    box-sizing: border-box;
-    padding: .5rem;
-    margin: 0 .25rem;
-    border: solid 1px transparent;
-    font-size: .9rem;
-    font-weight: bold;
-    cursor: pointer;
+	.icon {
+		width: 1rem;
+		height: 1rem;
+		padding: .5rem;
+		fill: var(--darken-weak);
 
-    .check {
-        display: none;
-    }
+		&:hover {
+			cursor: pointer;
+		}
+	}
 
-    &:hover {
-        color: var(--shadow);
-    }
+	.include:hover,
+	.include.active {
+		fill: var(--success);
+	}
 
-    &.active {
-		background: var(--background);
-        color: var(--primary);
-        box-shadow: 0 0 2px var(--shadow-weak);
-    }
+	.exclude:hover,
+	.exclude.active {
+		fill: var(--alert);
+	}
+
+	.name {
+		padding: .5rem;
+		color: var(--text);
+		text-decoration: none;
+	}
+
+	&:hover {
+		background: var(--darken-hint);
+		cursor: pointer;
+	}
 }
 </style>