sidebar animation

assets/components/container/container.vue

@@ -3,10 +3,8 @@
 		class="container"
 		:class="theme"
 	>
-		<Sidebar
-			v-if="showSidebar"
-			:toggle-sidebar="toggleSidebar"
-		/>
+        <Sidebar v-model="showSidebar" />
+        <SidebarBackground v-model="showSidebar" />
 
 		<Header :toggle-sidebar="toggleSidebar" />
 
@@ -20,10 +18,9 @@
 <script>
 import { mapState } from 'vuex';
 
-import EventBus from '../../js/event-bus';
-
 import Header from '../header/header.vue';
 import Sidebar from '../sidebar/sidebar.vue';
+import SidebarBackground from '../sidebar/background.vue';
 
 function theme(state) {
 	return state.ui.theme;
@@ -33,17 +30,11 @@ function toggleSidebar(state) {
 	this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
 }
 
-function mounted() {
-	document.addEventListener('click', () => {
-		EventBus.$emit('blur');
-		this.showSidebar = false;
-	});
-}
-
 export default {
 	components: {
 		Header,
-		Sidebar,
+        Sidebar,
+        SidebarBackground
 	},
 	data() {
 		return {
@@ -55,7 +46,6 @@ export default {
 			theme,
 		}),
 	},
-	mounted,
 	methods: {
 		toggleSidebar,
 	},