From 6e5f1f69034397700ab247e6d7a9d82ac3943d6a Mon Sep 17 00:00:00 2001
From: DutchEllie <personal@quenten.nl>
Date: Sun, 3 Jul 2022 12:25:25 +0200
Subject: [PATCH] Hamborgar

---
 src/components/guestbook.svelte   |  3 +++
 src/components/hamburger.svelte   | 16 ++++++++++++++++
 src/components/header.svelte      | 30 +++++++++++++++++-------------
 src/components/maincontent.svelte |  2 +-
 src/components/menu.svelte        | 19 +++++++++++++++++++
 src/routes/__layout.svelte        |  2 +-
 static/images/icons8-menu.svg     |  6 ++++++
 7 files changed, 63 insertions(+), 15 deletions(-)
 create mode 100644 src/components/guestbook.svelte
 create mode 100644 src/components/hamburger.svelte
 create mode 100644 src/components/menu.svelte
 create mode 100644 static/images/icons8-menu.svg

diff --git a/src/components/guestbook.svelte b/src/components/guestbook.svelte
new file mode 100644
index 0000000..9bddee5
--- /dev/null
+++ b/src/components/guestbook.svelte
@@ -0,0 +1,3 @@
+<div class="">
+
+</div>
\ No newline at end of file
diff --git a/src/components/hamburger.svelte b/src/components/hamburger.svelte
new file mode 100644
index 0000000..2ae0404
--- /dev/null
+++ b/src/components/hamburger.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Menu from './menu.svelte';
+
+	let open = false;
+</script>
+
+<button
+	on:click={() => {
+		open = !open;
+	}}
+	class="w-full h-full min-w-max"
+>
+	<img src="/images/icons8-menu.svg" alt="Hamburger menu" />
+</button>
+
+<Menu bind:open />
diff --git a/src/components/header.svelte b/src/components/header.svelte
index 2cc6fb7..fdfd7d7 100644
--- a/src/components/header.svelte
+++ b/src/components/header.svelte
@@ -1,28 +1,32 @@
 <script>
+	import Hamburger from './hamburger.svelte';
 	import Button from './navbutton.svelte';
 </script>
 
-<div class="md:h-16 h-24 align-middle grid grid-cols-7 sm:grid-rows-1 grid-rows-2">
-	<div class="h-16 col-span-7 sm:col-span-4 flex flex-row flex-wrap">
-		<img
-			class="h-4/5 md:ml-20 my-auto"
-			src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png"
-			alt="Icon"
-		/>
-		<div class="pl-5 mt-1">
+<div class="grid grid-cols-7 grid-rows-1 sm:grid-rows-1 gap-y-2 mt-2 sm:mt-4 sm:pl-4 align-middle h-24 md:h-16">
+	<div class="lg:col-start-2 col-span-7 md:col-span-4 lg:col-span-3 flex flex-row">
+		<div class="h-full">
+			<img
+				class="hidden sm:block h-full my-auto"
+				src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png"
+				alt="Icon"
+			/>
+			<div class="block sm:hidden ml-2 mt-4">
+				<Hamburger />
+			</div>
+		</div>
+		<div class="w-full sm:w-auto sm:pl-5 sm:my-auto text-center mx-auto sm:mx-0 pr-9 sm:pr-0">
 			<h1 class="text-2xl md:text-3xl h-min font-medium">Internetica Galactica 2</h1>
 			<p class="h-min text-xs">Surviving the rewriting</p>
 		</div>
 	</div>
-	<div class="sm:col-start-5 col-start-1 col-end-7 grid grid-cols-6">
-		<nav
-			class="h-full flex items-end md:col-start-4 md:col-span-2 col-span-7 gap-2 text-md"
-		>
+	<div class="hidden md:col-start-5 col-start-1 col-end-7 sm:grid grid-cols-6">
+		<nav class="h-full flex items-end md:col-start-4 md:col-span-2 col-span-7 gap-2 text-md">
 			<Button link="/" text="Home" />
 			<Button link="/about" text="About" />
 		</nav>
 	</div>
-<!-->
+	<!-->
 	<hr class="col-span-full border-slate-700" />
 </!-->
 </div>
diff --git a/src/components/maincontent.svelte b/src/components/maincontent.svelte
index fb9e275..273e657 100644
--- a/src/components/maincontent.svelte
+++ b/src/components/maincontent.svelte
@@ -1,3 +1,3 @@
-<div class="h-full w-full grid grid-cols-7 gap-3 overflow-auto">
+<div class="h-full w-full grid grid-cols-7 gap-3">
 	<slot/>
 </div>
\ No newline at end of file
diff --git a/src/components/menu.svelte b/src/components/menu.svelte
new file mode 100644
index 0000000..bc73c18
--- /dev/null
+++ b/src/components/menu.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Button from '../components/navbutton.svelte';
+	export /**
+	 * @type {any}
+	 */
+	let open;
+</script>
+
+{#if open}
+	<div
+		on:click={() => {
+			open = !open;
+		}}
+		class="z-10 bg-white absolute top-0 left-0 h-screen w-screen flex flex-col gap-4 text-center pt-16"
+	>
+		<Button link="/" text="Home" />
+		<Button link="/about" text="About" />
+	</div>
+{/if}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index cd28006..ed1eab4 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <div
-	class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen h-screen text-murasaki"
+	class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen h-screen text-murasaki overflow-auto"
 >
 	<!-- Possible alert header -->
 	<!--<AlertHeader text='ALERT'/>-->
diff --git a/static/images/icons8-menu.svg b/static/images/icons8-menu.svg
new file mode 100644
index 0000000..9508986
--- /dev/null
+++ b/static/images/icons8-menu.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30" width="30px" height="30px">
+<g id="surface37736022">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 3 7 C 2.640625 6.996094 2.304688 7.183594 2.121094 7.496094 C 1.941406 7.808594 1.941406 8.191406 2.121094 8.503906 C 2.304688 8.816406 2.640625 9.003906 3 9 L 27 9 C 27.359375 9.003906 27.695312 8.816406 27.878906 8.503906 C 28.058594 8.191406 28.058594 7.808594 27.878906 7.496094 C 27.695312 7.183594 27.359375 6.996094 27 7 Z M 3 14 C 2.640625 13.996094 2.304688 14.183594 2.121094 14.496094 C 1.941406 14.808594 1.941406 15.191406 2.121094 15.503906 C 2.304688 15.816406 2.640625 16.003906 3 16 L 27 16 C 27.359375 16.003906 27.695312 15.816406 27.878906 15.503906 C 28.058594 15.191406 28.058594 14.808594 27.878906 14.496094 C 27.695312 14.183594 27.359375 13.996094 27 14 Z M 3 21 C 2.640625 20.996094 2.304688 21.183594 2.121094 21.496094 C 1.941406 21.808594 1.941406 22.191406 2.121094 22.503906 C 2.304688 22.816406 2.640625 23.003906 3 23 L 27 23 C 27.359375 23.003906 27.695312 22.816406 27.878906 22.503906 C 28.058594 22.191406 28.058594 21.808594 27.878906 21.496094 C 27.695312 21.183594 27.359375 20.996094 27 21 Z M 3 21 "/>
+</g>
+</svg>