From d139f158d6744fe09e505caedebc8f1bc2ad3fb3 Mon Sep 17 00:00:00 2001
From: Elijah <ejsisgreat@gmail.com>
Date: Mon, 23 Dec 2019 14:19:55 -0600
Subject: [PATCH] Add some nice transitions

---
 site/src/components/SiteSearch.svelte | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/site/src/components/SiteSearch.svelte b/site/src/components/SiteSearch.svelte
index 407816263a..1db8fcf607 100644
--- a/site/src/components/SiteSearch.svelte
+++ b/site/src/components/SiteSearch.svelte
@@ -1,21 +1,30 @@
 <script>
 	import { writable } from 'svelte/store';
+	import { fade, fly} from 'svelte/transition';
 
 	export let showing = false;
 </script>
 
 {#if showing}
-	<div class="search"></div>
+	<div class="cover background" on:click={() => showing = false} transition:fade></div>
+	<div class="cover search" transition:fly={{x: 400}}></div>
 {/if}
 
 <style>
-	.search {
+	.cover {
 		position: fixed;
 		top: 0;
 		right: 0;
+		left: 0;
 		bottom: 0;
+		z-index: 100;
+	}
+	.background {
+		background: rgba(0, 0, 0, 0.6);
+	}
+	.search {
+		left:unset;
 		width: 385px;
 		background: var(--back);
-		z-index: 100;
 	}
 </style>