Added slide effect to sidebar.

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 {