From 56b8dc583a0ff08ca3db39a4898be5260319b3f7 Mon Sep 17 00:00:00 2001
From: boio <xorofficial@gmail.com>
Date: Sat, 8 Aug 2020 15:33:51 +0200
Subject: [PATCH] sidebar animation

---
 assets/components/container/container.vue |  20 +-
 assets/components/sidebar/background.vue  |  38 ++++
 assets/components/sidebar/sidebar.vue     | 252 +++++++++++-----------
 3 files changed, 170 insertions(+), 140 deletions(-)
 create mode 100644 assets/components/sidebar/background.vue

diff --git a/assets/components/container/container.vue b/assets/components/container/container.vue
index 4de1e96f..5e0c3448 100644
--- a/assets/components/container/container.vue
+++ b/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,
 	},
diff --git a/assets/components/sidebar/background.vue b/assets/components/sidebar/background.vue
new file mode 100644
index 00000000..027fb849
--- /dev/null
+++ b/assets/components/sidebar/background.vue
@@ -0,0 +1,38 @@
+<template>
+    <transition name="fade">
+        <div v-if="value" @click="toggleSidebar" 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>
diff --git a/assets/components/sidebar/sidebar.vue b/assets/components/sidebar/sidebar.vue
index ad6b95bd..1e251615 100644
--- a/assets/components/sidebar/sidebar.vue
+++ b/assets/components/sidebar/sidebar.vue
@@ -1,123 +1,124 @@
 <template>
-	<div class="sidebar-container">
-		<div
-			class="sidebar"
-			@click.stop
-		>
-			<div class="sidebar-section">
-				<div class="sidebar-header">
-					<Icon
-						icon="cross2"
-						class="sidebar-close"
-						@click.native="toggleSidebar(false)"
-					/>
+  <transition name="slide">
+    <div
+      v-if="value"
+      class="sidebar"
+      @click.stop
+    >
+      <div class="sidebar-section">
+        <div class="sidebar-header">
+          <Icon
+            icon="cross2"
+            class="sidebar-close"
+            @click.native="toggleSidebar(false)"
+          />
 
-					<router-link
-						to="/updates"
-						class="logo-link"
-						@click.native="toggleSidebar(false)"
-					>
-						<h1 class="sidebar-logo">
-							<div
-								class="logo"
-								v-html="logo"
-							/>
-						</h1>
-					</router-link>
-				</div>
+          <router-link
+            to="/updates"
+            class="logo-link"
+            @click.native="toggleSidebar(false)"
+          >
+            <h1 class="sidebar-logo">
+              <div
+                class="logo"
+                v-html="logo"
+              />
+            </h1>
+          </router-link>
+        </div>
 
-				<nav class="nav">
-					<ul class="nolist">
-						<li class="nav-item">
-							<router-link
-								v-slot="{ href, isActive, navigate }"
-								to="/updates"
-								@click.native="toggleSidebar(false)"
-							>
-								<a
-									class="nav-link"
-									:href="href"
-									:class="{ active: isActive }"
-									@click="navigate"
-								>Home</a>
-							</router-link>
-						</li>
+        <nav class="nav">
+          <ul class="nolist">
+            <li class="nav-item">
+              <router-link
+                v-slot="{ href, isActive, navigate }"
+                to="/updates"
+                @click.native="toggleSidebar(false)"
+              >
+                <a
+                  class="nav-link"
+                  :href="href"
+                  :class="{ active: isActive }"
+                  @click="navigate"
+                >Home</a>
+              </router-link>
+            </li>
 
-						<li class="nav-item">
-							<router-link
-								v-slot="{ href, isActive, navigate }"
-								to="/actors"
-								@click.native="toggleSidebar(false)"
-							>
-								<a
-									class="nav-link"
-									:href="href"
-									:class="{ active: isActive }"
-									@click="navigate"
-								>Actors</a>
-							</router-link>
-						</li>
+            <li class="nav-item">
+              <router-link
+                v-slot="{ href, isActive, navigate }"
+                to="/actors"
+                @click.native="toggleSidebar(false)"
+              >
+                <a
+                  class="nav-link"
+                  :href="href"
+                  :class="{ active: isActive }"
+                  @click="navigate"
+                >Actors</a>
+              </router-link>
+            </li>
 
-						<li class="nav-item">
-							<router-link
-								v-slot="{ href, isActive, navigate }"
-								to="/networks"
-								@click.native="toggleSidebar(false)"
-							>
-								<a
-									class="nav-link"
-									:href="href"
-									:class="{ active: isActive }"
-									@click="navigate"
-								>Channels</a>
-							</router-link>
-						</li>
+            <li class="nav-item">
+              <router-link
+                v-slot="{ href, isActive, navigate }"
+                to="/networks"
+                @click.native="toggleSidebar(false)"
+              >
+                <a
+                  class="nav-link"
+                  :href="href"
+                  :class="{ active: isActive }"
+                  @click="navigate"
+                >Channels</a>
+              </router-link>
+            </li>
 
-						<li class="nav-item">
-							<router-link
-								v-slot="{ href, isActive, navigate }"
-								to="/tags"
-								@click.native="toggleSidebar(false)"
-							>
-								<a
-									class="nav-link"
-									:href="href"
-									:class="{ active: isActive }"
-									@click="navigate"
-								>Tags</a>
-							</router-link>
-						</li>
-					</ul>
-				</nav>
-			</div>
+            <li class="nav-item">
+              <router-link
+                v-slot="{ href, isActive, navigate }"
+                to="/tags"
+                @click.native="toggleSidebar(false)"
+              >
+                <a
+                  class="nav-link"
+                  :href="href"
+                  :class="{ active: isActive }"
+                  @click="navigate"
+                >Tags</a>
+              </router-link>
+            </li>
+          </ul>
+        </nav>
+      </div>
 
-			<div class="sidebar-section toggles noselect">
-				<label
-					v-show="sfw"
-					class="toggle"
-					@click="setSfw(false)"
-				><Icon icon="evil2" />Disable safe mode</label>
+      <div class="sidebar-section toggles noselect">
+        <label
+          v-show="sfw"
+          class="toggle"
+          @click="setSfw(false)"
+        ><Icon icon="evil2" />Disable safe mode</label>
 
-				<label
-					v-show="!sfw"
-					class="toggle"
-					@click="setSfw(true)"
-				><Icon icon="flower" />Enable safe mode</label>
+        <label
+          v-show="!sfw"
+          class="toggle"
+          @click="setSfw(true)"
+        ><Icon icon="flower" />Enable safe mode</label>
 
-				<label
-					v-show="theme === 'dark'"
-					class="toggle"
-					@click="setTheme('light')"
-				><Icon icon="sun" />Use light theme</label>
+        <label
+          v-show="theme === 'dark'"
+          class="toggle"
+          @click="setTheme('light')"
+        ><Icon icon="sun" />Use light theme</label>
 
-				<label
-					v-show="theme === 'light'"
-					class="toggle"
-					@click="setTheme('dark')"
-				><Icon icon="moon" />Use dark theme</label>
-			</div>
-		</div>
-	</div>
+        <label
+          v-show="theme === 'light'"
+          class="toggle"
+          @click="setTheme('dark')"
+        ><Icon icon="moon" />Use dark theme</label>
+      </div>
+    </div>
+  </transition>
 </template>
 
 <script>
@@ -143,10 +144,9 @@ function setSfw(enabled) {
 
 export default {
 	props: {
-		toggleSidebar: {
-			type: Function,
-			default: null,
-		},
+        value: {
+            type: Boolean
+        }
 	},
 	data() {
 		return {
@@ -161,26 +161,28 @@ export default {
 	},
 	methods: {
 		setTheme,
-		setSfw,
+        setSfw,
+        toggleSidebar(state) {
+        this.$emit("input", !!state);
+        }
 	},
 };
 </script>
 
 <style lang="scss" scoped>
-.sidebar-container {
-    height: 100%;
-	width: 100%;
-    position: absolute;
-    z-index: 10;
-	background: var(--darken-hint);
+.slide-leave-active,
+.slide-enter-active {
+    transition: 0.2s ease-in-out;
+}
+.slide-enter, .slide-leave-to {
+    transform: translate(-100%, 0);
 }
 
 .sidebar {
-    display: flex;
-    flex-direction: column;
-	justify-content: space-between;
+    position: fixed;
+    z-index: 10;
     width: 15rem;
-    height: 100%;
+    height: 100vh;
     color: var(--text);
     background: var(--background);
     box-shadow: 0 0 3px var(--darken-weak);