From d55a57d57fb1a2d2ac69bac984a4932db0202a68 Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Thu, 23 Feb 2023 10:46:07 +0100
Subject: [PATCH] Restyle nav for mobile view

---
 index.html      |  6 ++++--
 sass/style.scss | 38 ++++++++++++++++++++++++++++++++------
 static/menu.svg |  1 +
 3 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 static/menu.svg

diff --git a/index.html b/index.html
index f2da7d6..f6810d7 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,9 @@
 			<header>
 				<div class="wrap">
 					<div class="border-container">
-						<img src="/static/logo.svg" alt="Logo" class="logo">
+						<div class="logo">
+							<img src="/static/logo.svg" alt="Logo" class="logo">
+						</div>
 						<nav>
 							<a href="#zasady">Obecné zásady</a>
 							<a href="#checklist">Učitelský checklist</a>
@@ -20,7 +22,7 @@
 							<a href="#faq">FAQ</a>
 						</nav>
 						<div class="menu-button">
-							.
+							<img src="/static/menu.svg" alt="menu">
 						</div>
 					</div>
 				</div>
diff --git a/sass/style.scss b/sass/style.scss
index bb373e1..ca45dd5 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -71,9 +71,17 @@ section {
 	header {
 		border-bottom: 1px solid #5D6E81;
 		margin-bottom: 4em;
+		height: 5rem;
+
+		.wrap {
+			height: 100%;
+		}
+
 		.border-container {
+			width: 100%;
+			height: 100%;
 			display: flex;
-			align-items: center;
+			align-items: stretch;
 			justify-content: space-between;
 			gap: 2rem;
 			border-width: 0 1px;
@@ -83,15 +91,25 @@ section {
 		}
 
 		.logo {
-			height: 2rem;
+			display: flex;
+			align-items: center;
+			flex-shrink: 0;
+			height: 100%;
+
+			img {
+				height: 2rem;
+			}
 		}
 
 		nav {
-			display: flex;
+			display: none;
 
 			a {
-				display: block;
-				padding: 2em 1.5em;
+				display: flex;
+				align-items: center;
+				flex-shrink: 0;
+				padding: 0 1.5em;
+				overflow: hidden;
 				font-weight: bold;
 				text-decoration: none;
 				text-align: center;
@@ -105,7 +123,15 @@ section {
 		}
 
 		.menu-button {
-			display: none;
+			display: flex;
+			align-items: center;
+			flex-shrink: 0;
+			padding: 0 1.5em;
+			cursor: pointer;
+
+			img {
+				height: 2rem;
+			}
 		}
 	}
 
diff --git a/static/menu.svg b/static/menu.svg
new file mode 100644
index 0000000..7f32812
--- /dev/null
+++ b/static/menu.svg
@@ -0,0 +1 @@
+<svg width="403.143" height="366.667" viewBox="0 0 12.094 11" xmlns="http://www.w3.org/2000/svg"><path d="M2.03 11a.5.5 0 0 1 0-1h8.035a.5.5 0 0 1 0 1zM.5 6a.5.5 0 0 1 0-1h11.094a.5.5 0 0 1 0 1zM2.03 1a.5.5 0 1 1 0-1h8.035a.5.5 0 0 1 0 1z" style="fill:#fff;fill-opacity:1"/></svg>
\ No newline at end of file