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,