From c5c68907f8700eeb015df7f62d5205ae57864a16 Mon Sep 17 00:00:00 2001
From: Elijah <ejsisgreat@gmail.com>
Date: Mon, 23 Dec 2019 14:02:15 -0600
Subject: [PATCH] Create a SiteSearch component

---
 site/src/components/SiteSearch.svelte | 21 +++++++++++++++++++++
 site/src/routes/_layout.svelte        | 11 +++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 site/src/components/SiteSearch.svelte

diff --git a/site/src/components/SiteSearch.svelte b/site/src/components/SiteSearch.svelte
new file mode 100644
index 0000000000..407816263a
--- /dev/null
+++ b/site/src/components/SiteSearch.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	export let showing = false;
+</script>
+
+{#if showing}
+	<div class="search"></div>
+{/if}
+
+<style>
+	.search {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		width: 385px;
+		background: var(--back);
+		z-index: 100;
+	}
+</style>
diff --git a/site/src/routes/_layout.svelte b/site/src/routes/_layout.svelte
index 55f4861880..5b812b7a16 100644
--- a/site/src/routes/_layout.svelte
+++ b/site/src/routes/_layout.svelte
@@ -3,9 +3,12 @@
 	import { stores } from '@sapper/app';
 	import { Icon, Icons, Nav, NavItem } from '@sveltejs/site-kit';
 	import PreloadingIndicator from '../components/PreloadingIndicator.svelte';
+	import SiteSearch from '../components/SiteSearch.svelte';
 
 	export let segment;
 
+	let showingSearch = false;
+
 	const { page, preloading, session } = stores();
 
 	setContext('app', {
@@ -53,7 +56,15 @@
 		<NavItem external="https://github.com/sveltejs/svelte" title="GitHub Repo">
 			<Icon name="github"/>
 		</NavItem>
+
+		<NavItem active={showingSearch} title="Search Site">
+			<span on:click={() => showingSearch = true}>
+				<Icon name="github"/>
+			</span>
+		</NavItem>
 	</Nav>
+
+	<SiteSearch bind:showing={showingSearch}/>
 {/if}
 
 <main>