Create a SiteSearch component

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>

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>