From b4d0655f620eaa33faa3090d5054b56226d6e192 Mon Sep 17 00:00:00 2001
From: Filip Krumpe <f.krumpe@spielberger-muehle.de>
Date: Mon, 10 Jan 2022 19:47:03 +0100
Subject: [PATCH] Add sidebar menu

---
 webapp/src/App.svelte          | 23 +++++-----------------
 webapp/src/menu/Navbar.svelte  |  8 ++++----
 webapp/src/menu/Sidebar.svelte |  6 +++---
 webapp/src/pages/Main.svelte   | 36 ++++++++++++++++++++++++++++++++++
 4 files changed, 48 insertions(+), 25 deletions(-)
 create mode 100644 webapp/src/pages/Main.svelte

diff --git a/webapp/src/App.svelte b/webapp/src/App.svelte
index 972c9fd..6b21eee 100644
--- a/webapp/src/App.svelte
+++ b/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;
diff --git a/webapp/src/menu/Navbar.svelte b/webapp/src/menu/Navbar.svelte
index fb9289a..8f4531b 100644
--- a/webapp/src/menu/Navbar.svelte
+++ b/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">
diff --git a/webapp/src/menu/Sidebar.svelte b/webapp/src/menu/Sidebar.svelte
index 3be45ec..b91a96f 100644
--- a/webapp/src/menu/Sidebar.svelte
+++ b/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
 	}
diff --git a/webapp/src/pages/Main.svelte b/webapp/src/pages/Main.svelte
new file mode 100644
index 0000000..1a15b70
--- /dev/null
+++ b/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>
\ No newline at end of file