Added filter dialog toggle to sidebar. Moved filter dialog to container. Using events to toggle sidebar from header.

assets/components/container/container.vue

@@ -10,15 +10,24 @@
 		<transition name="slide">
 			<Sidebar
 				v-if="showSidebar"
-				@toggle="(state) => showSidebar = state"
+				@toggle-sidebar="(state) => toggleSidebar(state)"
+				@show-filters="(state) => toggleFilters(state)"
 			/>
 		</transition>
 
-		<Header :toggle-sidebar="toggleSidebar" />
+		<Header
+			@toggle-sidebar="(state) => toggleSidebar(state)"
+			@show-filters="(state) => toggleFilters(state)"
+		/>
 
 		<div class="content">
 			<router-view />
 		</div>
+
+		<Filters
+			v-if="showFilters"
+			@close="toggleFilters(false)"
+		/>
 	</div>
 </template>
 
@@ -26,11 +35,17 @@
 import Warning from './warning.vue';
 import Header from '../header/header.vue';
 import Sidebar from '../sidebar/sidebar.vue';
+import Filters from './filters.vue';
 
 function toggleSidebar(state) {
 	this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
 }
 
+function toggleFilters(state) {
+	this.showFilters = state;
+	this.showSidebar = false;
+}
+
 async function setConsent(consent) {
 	if (consent) {
 		this.showWarning = false;
@@ -61,17 +76,20 @@ export default {
 		Header,
 		Sidebar,
 		Warning,
+		Filters,
 	},
 	data() {
 		return {
 			showSidebar: false,
 			showWarning: localStorage.getItem('consent') !== window.env.sessionId,
+			showFilters: false,
 		};
 	},
 	mounted,
 	beforeUnmount,
 	methods: {
 		toggleSidebar,
+		toggleFilters,
 		setConsent,
 		blur,
 		resize,

assets/components/container/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>