added search bar

src/App.svelte

@@ -21,14 +21,22 @@
         window.addEventListener('scroll', handleScroll);
         return () => window.removeEventListener('scroll', handleScroll);
     });
+
+	let searchValue = '';
+
+	function handleSearch(event) {
+		// Update the searchValue with the value received from the child component
+		searchValue = event.detail;
+	}
 </script>
 
 <Title visible={showTitle} />
-<Navbar />
+<Navbar on:search={handleSearch} />
 
 <main>
 	<div class="content">
 		<Router {routes} />
+		<p>Search Value: {searchValue}</p>
 	</div>
 </main>
 

src/components/Navbar.svelte

@@ -1,8 +1,23 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+
+    let searchTerm = '';
+
+    function handleSearch() {
+      // Dispatch an event with the search term as payload
+      dispatch('search', searchTerm);
+    }
+  </script>
+
 <nav class="navbar">
     <ul>
         <li><a href="/#/">Home</a></li>
         <li><a href="https://jonasjones.dev/about">About</a></li>
         <li><a href="#contact">Contact</a></li>
+        <input type="text" bind:value={searchTerm} />
+        <button on:click={handleSearch}>Search</button>
         <a href="https://jonasjones.dev" class="sticky-link">Homepage</a>
     </ul>
 </nav>

src/routes/Home.svelte

@@ -1,18 +1,3 @@
-<h1>Hello world!</h1>
-<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
-<p>
-    This template is pre-configured with svlete-spa-router for routing.<br/>
-    Visit the <a href="https://github.com/ItalyPaleAle/svelte-spa-router">documentation for the router</a> to learn more.
-</p>
-<p>
-    Check a route: <a href="#/lorem/2">Lorem ipsum</a>
-</p>
-
-<style>
-	h1 {
-		color: #ff3e00;
-		text-transform: uppercase;
-		font-size: 4em;
-		font-weight: 100;
-	}
-</style>
+<div>
+	<h1>Welcome to my Blog!</h1>
+</div>