assets/components/container/container.vue

@@ -3,10 +3,8 @@
 		class="container"
 		:class="theme"
 	>
-		<Sidebar
+        <Sidebar v-model="showSidebar" />
-			v-if="showSidebar"
+        <SidebarBackground v-model="showSidebar" />
-			:toggle-sidebar="toggleSidebar"
-		/>
 
 		<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,
+        SidebarBackground
 	},
 	data() {
 		return {
@@ -55,7 +46,6 @@ export default {
 			theme,
 		}),
 	},
-	mounted,
 	methods: {
 		toggleSidebar,
 	},

assets/components/sidebar/background.vue

@@ -0,0 +1,38 @@
+<template>
+    <transition name="fade">
+        <div v-if="value" @click="toggleSidebar(false)" class="sidebar-container">
+        </div>
+    </transition>
+</template>
+
+<script>
+export default {
+	props: {
+        value: {
+            type: Boolean
+        }
+	},
+	methods: {
+        toggleSidebar(state) {
+            this.$emit("input", !!state);
+        }
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active, .fade-leave-active {
+    transition: opacity .2s ease-in-out;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+    opacity: 0;
+}
+
+.sidebar-container {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    z-index: 9;
+    background: var(--darken-weak);
+}
+</style>

assets/components/sidebar/sidebar.vue

@@ -1,6 +1,7 @@
 <template>
-	<div class="sidebar-container">
+  <transition name="slide">
     <div
+      v-if="value"
       class="sidebar"
       @click.stop
     >
@@ -117,7 +118,7 @@
         ><Icon icon="moon" />Use dark theme</label>
       </div>
     </div>
-	</div>
+  </transition>
 </template>
 
 <script>
@@ -143,10 +144,9 @@ function setSfw(enabled) {
 
 export default {
 	props: {
-		toggleSidebar: {
+        value: {
-			type: Function,
+            type: Boolean
-			default: null,
+        }
-		},
 	},
 	data() {
 		return {
@@ -162,25 +162,27 @@ export default {
 	methods: {
 		setTheme,
         setSfw,
+        toggleSidebar(state) {
+        this.$emit("input", !!state);
+        }
 	},
 };
 </script>
 
 <style lang="scss" scoped>
-.sidebar-container {
+.slide-leave-active,
-    height: 100%;
+.slide-enter-active {
-	width: 100%;
+    transition: 0.2s ease-in-out;
-    position: absolute;
+}
-    z-index: 10;
+.slide-enter, .slide-leave-to {
-	background: var(--darken-hint);
+    transform: translate(-100%, 0);
 }
 
 .sidebar {
-    display: flex;
+    position: fixed;
-    flex-direction: column;
+    z-index: 10;
-	justify-content: space-between;
     width: 15rem;
-    height: 100%;
+    height: 100vh;
     color: var(--text);
     background: var(--background);
     box-shadow: 0 0 3px var(--darken-weak);