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

assets/components/header/filters.vue

@@ -1,69 +0,0 @@
-<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

@@ -31,7 +31,7 @@
 					<li class="nav-item">
 						<router-link
 							v-slot="{ href, isActive, navigate }"
-							to="/networks"
+							to="/channels"
 							custom
 						>
 							<a
@@ -79,7 +79,7 @@
 		<div class="header-section">
 			<div
 				class="sidebar-toggle noselect"
-				@click.stop="toggleSidebar"
+				@click.stop="$emit('toggleSidebar')"
 			><Icon icon="menu" /></div>
 
 			<Tooltip>
@@ -148,7 +148,7 @@
 
 							<li
 								class="menu-item"
-								@click="showFilters = true"
+								@click="$emit('showFilters', true)"
 							>
 								<Icon icon="filter" />Filters
 							</li>
@@ -157,11 +157,6 @@
 				</template>
 			</Tooltip>
 
-			<Filters
-				v-if="showFilters"
-				@close="showFilters = false"
-			/>
-
 			<Search class="search-full" />
 
 			<Tooltip
@@ -194,7 +189,6 @@
 import { mapState } from 'vuex';
 
 import Search from './search.vue';
-import Filters from './filters.vue';
 
 import logo from '../../img/logo.svg';
 
@@ -217,14 +211,8 @@ function setSfw(enabled) {
 export default {
 	components: {
 		Search,
-		Filters,
-	},
-	props: {
-		toggleSidebar: {
-			type: Function,
-			default: null,
-		},
 	},
+	emits: ['toggleSidebar', 'showFilters'],
 	data() {
 		return {
 			logo,