Added tag filter dialog.

assets/components/header/filters.vue

@@ -0,0 +1,69 @@
+<template>
+	<Dialog
+		title="filters"
+		@close="$emit('close')"
+	>
+		<h3 class="form-heading">Show me</h3>
+
+		<ul class="tags nolist">
+			<li
+				v-for="tag in tags"
+				:key="tag"
+				class="tags-item"
+			>
+				<Checkbox
+					:checked="!tagFilter.includes(tag)"
+					:label="tag"
+					class="tag"
+					@change="(state) => filterTag(tag, state)"
+				/>
+			</li>
+		</ul>
+	</Dialog>
+</template>
+
+<script>
+import Checkbox from '../form/checkbox.vue';
+
+function tagFilter() {
+	return this.$store.state.ui.tagFilter;
+}
+
+function filterTag(tag, isChecked) {
+	if (isChecked) {
+		this.$store.dispatch('setTagFilter', this.tagFilter.filter(filteredTag => filteredTag !== tag));
+	} else {
+		this.$store.dispatch('setTagFilter', this.tagFilter.concat(tag));
+	}
+}
+
+export default {
+	components: {
+		Checkbox,
+	},
+	data() {
+		return {
+			tags: ['anal', 'gay', 'transsexual', 'bisexual', 'pissing'],
+		};
+	},
+	computed: {
+		tagFilter,
+	},
+	emits: ['close'],
+	methods: {
+		filterTag,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.tags-item {
+	width: 20rem;
+	max-width: 100%;
+	display: block;
+}
+
+.tag {
+	padding: .5rem 0;
+}
+</style>

assets/components/header/header.vue

@@ -147,8 +147,8 @@
 							</li>
 
 							<li
-								class="menu-item disabled"
-								@click.stop
+								class="menu-item"
+								@click="showFilters = true"
 							>
 								<Icon icon="filter" />Filters
 							</li>
@@ -157,6 +157,11 @@
 				</template>
 			</Tooltip>
 
+			<Filters
+				v-if="showFilters"
+				@close="showFilters = false"
+			/>
+
 			<Search class="search-full" />
 
 			<Tooltip
@@ -189,6 +194,7 @@
 import { mapState } from 'vuex';
 
 import Search from './search.vue';
+import Filters from './filters.vue';
 
 import logo from '../../img/logo.svg';
 
@@ -211,6 +217,7 @@ function setSfw(enabled) {
 export default {
 	components: {
 		Search,
+		Filters,
 	},
 	props: {
 		toggleSidebar: {
@@ -222,6 +229,7 @@ export default {
 		return {
 			logo,
 			searching: false,
+			showFilters: false,
 		};
 	},
 	computed: {