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

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,