Added slide effect to sidebar.

assets/components/container/container.vue

@@ -3,10 +3,12 @@
 		class="container"
 		:class="theme"
 	>
-		<Sidebar
-			v-if="showSidebar"
-			:toggle-sidebar="toggleSidebar"
-		/>
+		<transition name="slide">
+			<Sidebar
+				v-if="showSidebar"
+				@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>