Add sidebar menu

webapp/src/App.svelte

@@ -2,17 +2,18 @@
 	import Navbar from "./menu/Navbar.svelte";
 	import Sidebar from "./menu/Sidebar.svelte";
 
-	export let name;
+	import Main from "./pages/Main.svelte";
+
+	export let name = "Test 2";
 
 	let open = false;
 </script>
 
-<main>
+<main class="w-full h-full">
 	<Sidebar bind:open/>
 	<Navbar bind:sidebar={open}/>
 
-	<h1>Hello {name}!</h1>
-	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+	<Main name={name} />
 </main>
 
 <svelte:head>
@@ -20,20 +21,6 @@
 </svelte:head>
 
 <style>
-	main {
-		text-align: center;
-		padding: 1em;
-		max-width: 240px;
-		margin: 0 auto;
-	}
-
-	h1 {
-		color: #ff3e00;
-		text-transform: uppercase;
-		font-size: 4em;
-		font-weight: 100;
-	}
-
 	@media (min-width: 640px) {
 		main {
 			max-width: none;

webapp/src/menu/Navbar.svelte

@@ -1,9 +1,9 @@
 <script>
-	import Logo from './Logo.svelte'
-	import Hamburger from './Hamburger.svelte'
-	import Menu from './Menu.svelte'
+	import Logo from './Logo.svelte';
+	import Hamburger from './Hamburger.svelte';
+	import Menu from './Menu.svelte';
 	
-	export let sidebar = false
+	export let sidebar = false;
 </script>
 
 <header class="flex justify-between bg-gray-200 p-2 items-center text-gray-600 border-b-2">

webapp/src/menu/Sidebar.svelte

@@ -4,8 +4,8 @@
 
 <aside class="absolute w-full h-full bg-gray-200 border-r-2 shadow-lg" class:open>
 	<nav class="p-12 text-xl">
-		<a class="block" href="#about">About</a>
-		<a class="block" href="#contact">Contact</a>
+		<a class="block" href="/">Home</a>
+		<a class="block" href="/about">About</a>
 	</nav>
 </aside>
 
@@ -14,7 +14,7 @@
 		left: -100%;
 		transition: left 0.3s ease-in-out
 	}
-	
+
 	.open {
 		left: 0
 	}

webapp/src/pages/Main.svelte

@@ -0,0 +1,36 @@
+<script>
+	export let open=true
+	export let name;
+</script>
+
+<aside class="abolute w-full h-full p-4" class:open class:hidden={!open}>
+	<h1>Hello {name}!</h1>
+	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+</aside>
+
+<style>
+	aside {
+		left: -100%;
+		transition: right 0.3s ease-in-out;
+
+		text-align: center;
+		padding: 1em;
+		max-width: 480px;
+		margin: 0 auto;
+	}
+
+	.open {
+		left: 0;
+	}
+
+	.hidden {
+		visibility: hidden;
+	}
+
+	h1 {
+		color: #ff3e00;
+		text-transform: uppercase;
+		font-size: 4em;
+		font-weight: 100;
+	}
+</style>