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/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,

assets/components/sidebar/sidebar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="sidebar-container"
-		@click="$emit('toggle', false)"
+		@click="$emit('toggleSidebar', false)"
 	>
 		<div
 			class="sidebar"
@@ -12,7 +12,7 @@
 					<router-link
 						to="/updates"
 						class="logo-link"
-						@click.native="$emit('toggle', false)"
+						@click="$emit('toggleSidebar', false)"
 					>
 						<h1 class="sidebar-logo">
 							<div
@@ -25,23 +25,25 @@
 					<Icon
 						icon="cross2"
 						class="sidebar-close noselect"
-						@click.native="$emit('toggle', false)"
+						@click.native="$emit('toggleSidebar', false)"
 					/>
 				</div>
 
 				<Search
 					class="search"
-					@search="$emit('toggle', false)"
+					@search="$emit('toggleSidebar', false)"
 				/>
 
 				<nav class="nav">
 					<ul class="nolist">
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/updates"
 								custom
-								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -52,12 +54,14 @@
 							</router-link>
 						</li>
 
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/actors"
 								custom
-								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -68,12 +72,14 @@
 							</router-link>
 						</li>
 
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
-								to="/networks"
+								to="/channels"
 								custom
-								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -84,12 +90,14 @@
 							</router-link>
 						</li>
 
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/movies"
 								custom
-								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -100,12 +108,14 @@
 							</router-link>
 						</li>
 
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/tags"
 								custom
-								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -143,6 +153,11 @@
 					class="toggle"
 					@click="setTheme('dark')"
 				><Icon icon="moon" />Use dark theme</label>
+
+				<label
+					class="toggle"
+					@click="$emit('showFilters', true)"
+				><Icon icon="filter" />Filters</label>
 			</div>
 		</div>
 	</div>
@@ -175,6 +190,7 @@ export default {
 	components: {
 		Search,
 	},
+	emits: ['toggleSidebar', 'showFilters'],
 	data() {
 		return {
 			logo,
@@ -240,6 +256,12 @@ export default {
     margin: 0;
 }
 
+.sidebar-section {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
 .logo-link {
     display: block;
     height: 100%;
@@ -265,6 +287,11 @@ export default {
 	}
 }
 
+.nav {
+	flex-grow: 1;
+	overflow-x: auto;
+}
+
 .nav-item {
     display: block;
 }
@@ -286,13 +313,13 @@ export default {
 }
 
 .toggles {
+	flex-shrink: 0;
 	border-top: solid 1px var(--shadow-hint);
 	margin: .5rem 0 0 0;
 }
 
 .toggle {
 	display: flex;
-	align-self: flex-end;
 	padding: 1rem;
 	color: var(--shadow);
 	font-weight: bold;

assets/js/router.js

@@ -151,9 +151,9 @@ const routes = [
 		name: 'actors',
 	},
 	{
-		path: '/networks',
+		path: '/channels',
 		component: Networks,
-		name: 'networks',
+		name: 'channels',
 	},
 	{
 		path: '/movies',