Added slide effect to sidebar.

assets/components/container/container.vue

@@ -3,10 +3,12 @@
 		class="container"
 		:class="theme"
 	>
+		<transition name="slide">
 			<Sidebar
 				v-if="showSidebar"
-			:toggle-sidebar="toggleSidebar"
+				@toggle="(state) => showSidebar = state"
 			/>
+		</transition>
 
 		<Header :toggle-sidebar="toggleSidebar" />
 
@@ -36,7 +38,6 @@ function toggleSidebar(state) {
 function mounted() {
 	document.addEventListener('click', () => {
 		EventBus.$emit('blur');
-		this.showSidebar = false;
 	});
 }
 
@@ -88,4 +89,26 @@ export default {
 	overflow-y: auto;
 	overflow-x: hidden;
 }
+
+.slide-enter-active,
+.slide-leave-active {
+	&.sidebar-container {
+		transition: background .2s ease-in-out;
+	}
+
+	.sidebar {
+		transition: transform .2s ease-in-out;
+	}
+}
+
+.slide-enter,
+.slide-leave-to {
+	&.sidebar-container {
+		background: transparent;
+	}
+
+	.sidebar {
+		transform: translate(-100%, 0);
+	}
+}
 </style>

assets/components/header/header.vue

@@ -2,7 +2,7 @@
 	<header class="header">
 		<div class="header-nav">
 			<div
-				class="sidebar-toggle"
+				class="sidebar-toggle noselect"
 				@click.stop="toggleSidebar"
 			><Icon icon="menu" /></div>
 

assets/components/sidebar/sidebar.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="sidebar-container">
+	<div
+		class="sidebar-container"
+		@click="$emit('toggle', false)"
+	>
 		<div
 			class="sidebar"
 			@click.stop
@@ -8,14 +11,14 @@
 				<div class="sidebar-header">
 					<Icon
 						icon="cross2"
-						class="sidebar-close"
-						@click.native="toggleSidebar(false)"
+						class="sidebar-close noselect"
+						@click.native="$emit('toggle', false)"
 					/>
 
 					<router-link
 						to="/updates"
 						class="logo-link"
-						@click.native="toggleSidebar(false)"
+						@click.native="$emit('toggle', false)"
 					>
 						<h1 class="sidebar-logo">
 							<div
@@ -32,7 +35,7 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/updates"
-								@click.native="toggleSidebar(false)"
+								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -47,7 +50,7 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/actors"
-								@click.native="toggleSidebar(false)"
+								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -62,7 +65,7 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/networks"
-								@click.native="toggleSidebar(false)"
+								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -77,7 +80,7 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/movies"
-								@click.native="toggleSidebar(false)"
+								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -92,7 +95,7 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/tags"
-								@click.native="toggleSidebar(false)"
+								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -157,12 +160,6 @@ function setSfw(enabled) {
 }
 
 export default {
-	props: {
-		toggleSidebar: {
-			type: Function,
-			default: null,
-		},
-	},
 	data() {
 		return {
 			logo,
@@ -187,7 +184,7 @@ export default {
 	width: 100%;
     position: absolute;
     z-index: 10;
-	background: var(--darken-hint);
+	background: var(--darken-weak);
 }
 
 .sidebar {