From 9b4485c207069516141f79148a24b1bf0f7a52cc Mon Sep 17 00:00:00 2001
From: AlexBocken <alexander@bocken.org>
Date: Sun, 25 Jun 2023 14:42:37 +0200
Subject: [PATCH] mobile burger menu

---
 src/routes/+layout.svelte       | 81 +++++++++++++++++++++++++++++----
 src/routes/rezepte/+page.svelte | 16 ++-----
 2 files changed, 77 insertions(+), 20 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f7b5153..b10e458 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,10 @@
 <script>
 import "$lib/components/nordtheme.css"
+
+function show_sidebar(){
+	const nav_el = document.querySelector("nav")
+	nav_el.hidden = !nav_el.hidden
+}
 </script>
 <style>
 :global(*){
@@ -10,7 +15,19 @@ font-family: sans-serif;
 	margin:0;
 	padding:0;
 	background-color: #fbf9f3;
+	overflow-x: hidden;
 }
+
+nav{
+	position: sticky;
+	background-color: var(--nord0);
+	top: 0;
+	z-index: 10;
+}
+nav[hidden]{
+	display:block;
+}
+
 li{
 	list-style-type:none;
 	transition: 100ms;
@@ -43,22 +60,65 @@ ul {
 	margin: 0;
 	margin-inline: auto;
 }
+.nav_button{
+	display: none;
+}
+.button_wrapper{
+	display: none;
+}
 @media screen and (max-width: 500px) {
+	.button_wrapper{
+		display: flex;
+		justify-content: right;
+		align-items: center;
+		position: sticky;
+		background-color: var(--nord0);
+		width: 100%;
+		height: 4rem;
+		top: 0;
+		z-index: 9999;
+	}
+	.nav_button{
+		border: unset;
+		background-color: unset;
+		display: block;
+		fill: white;
+		margin-inline: 1rem;
+		width: 3rem;
+		aspect-ratio: 1;
+	}
+	.nav_button svg{
+		width: 100%;
+		height: 100%;
+	}
+	nav{
+		position: fixed;
+		top: 0;
+		right: 0;
+		height: 100%;
+		width: min(80svw, 40em);
+		transition: 100ms;
+		z-index: 10;
+	}
+	nav[hidden]{
+		transform: translateX(100%);
+	}
+
 	ul{
-	flex-direction: column;
+		flex-direction: column;
+		padding-top: min(10rem, 10vh);
+	}
+	li{
+		font-size: 4rem;
+	}
+	li > a{
+		font-size: 2rem;
 	}
 	li:hover,
 	li:focus-within{
 	transform: unset;
 	}
 }
-
-nav{
-	position: sticky;
-	background-color: var(--nord0);
-	top: 0;
-	z-index: 10;
-}
 .wrapper{
 	display:flex;
 	flex-direction: column;
@@ -72,7 +132,10 @@ margin-top: auto;
 </style>
 <div class=wrapper>
 <div>
-<nav>
+<div class=button_wrapper>
+<button class=nav_button on:click={show_sidebar}><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg></button>
+</div>
+<nav hidden>
 <ul>
 	<li><a href="/">Home</a></li>
 	<li><a href="/rezepte">Alle Rezepte</a></li>
diff --git a/src/routes/rezepte/+page.svelte b/src/routes/rezepte/+page.svelte
index ac27105..0c846b0 100644
--- a/src/routes/rezepte/+page.svelte
+++ b/src/routes/rezepte/+page.svelte
@@ -9,18 +9,12 @@
     export let current_month = new Date().getMonth() + 1
 </script>
 <style>
-h1,
-h2{
-	max-width: 1000px;
-	margin-left: 5rem;
-	margin-bottom: 0;
-}
 h1{
-font-size: 4rem;
-}
-h2{
-	font-size: 3rem;
-	margin-bottom: 1rem;
+	box-sizing: border-box;
+	max-width: 1000px;
+	padding-left: 5rem;
+	margin-bottom: 0;
+	font-size: 4rem;
 }
 </style>
 <h1>Rezepte</h1>