From 7fcfbb76b05e9b767ca4e16874c319af4c86a561 Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Thu, 23 Feb 2023 11:34:38 +0100
Subject: [PATCH] Make menu interactive

---
 index.html                           |  9 +++----
 sass/style.scss                      | 35 +++++++++++++++++++++++++---
 static/js/nav.js                     |  4 ++++
 static/{menu.svg => menu-closed.svg} |  2 +-
 static/menu-open.svg                 |  1 +
 5 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 static/js/nav.js
 rename static/{menu.svg => menu-closed.svg} (68%)
 create mode 100644 static/menu-open.svg

diff --git a/index.html b/index.html
index f6810d7..7139985 100644
--- a/index.html
+++ b/index.html
@@ -14,15 +14,15 @@
 						<div class="logo">
 							<img src="/static/logo.svg" alt="Logo" class="logo">
 						</div>
-						<nav>
+						<nav id="nav">
 							<a href="#zasady">Obecné zásady</a>
 							<a href="#checklist">Učitelský checklist</a>
 							<a href="#pribehy">Příběhy</a>
 							<a href="#kontakty">Na koho se obrátit</a>
 							<a href="#faq">FAQ</a>
 						</nav>
-						<div class="menu-button">
-							<img src="/static/menu.svg" alt="menu">
+						<div class="menu-button" id="menu-button">
+							<div class="image"></div>
 						</div>
 					</div>
 				</div>
@@ -153,7 +153,8 @@
 			<p class="text-bold">Neziskový projekt Pedagogické fakulty Univerzity Karlovy.</p>
 		</footer>
 
-	<script type="text/javascript" src="/static/js/vanilla-tilt.js"></script>
+	<script type="text/javascript" src="/static/js/nav.js"></script>
 	<script type="text/javascript" src="/static/js/accordion.js"></script>
+	<script type="text/javascript" src="/static/js/vanilla-tilt.js"></script>
 	</body>
 </html>
diff --git a/sass/style.scss b/sass/style.scss
index ca45dd5..5f24201 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -4,6 +4,7 @@ $col-white: #fff;
 $col-bg: #0b1b2e;
 $col-accent: #845368;
 
+$size-mobile: 950px;
 
 /* Global */
 
@@ -69,6 +70,7 @@ section {
 	min-height: 100vh;
 
 	header {
+		position: relative;
 		border-bottom: 1px solid #5D6E81;
 		margin-bottom: 4em;
 		height: 5rem;
@@ -102,7 +104,11 @@ section {
 		}
 
 		nav {
-			display: none;
+			display: flex;
+
+			&.visible {
+				display: flex;
+			}
 
 			a {
 				display: flex;
@@ -123,14 +129,23 @@ section {
 		}
 
 		.menu-button {
-			display: flex;
+			display: none;
 			align-items: center;
 			flex-shrink: 0;
 			padding: 0 1.5em;
 			cursor: pointer;
+			border-left: 1px solid #5D6E81;
 
-			img {
+			.image {
 				height: 2rem;
+				width: 2rem;
+				background-image: url("/static/menu-closed.svg");
+				background-size: cover;
+				background-repeat: no-repeat;
+
+				&.open {
+					background-image: url("/static/menu-open.svg");
+				}
 			}
 		}
 	}
@@ -304,3 +319,17 @@ footer {
 		background-color: $col-bg;
 	}
 }
+
+@media only screen and (max-width: $size-mobile) {
+
+	.intro header {
+
+		.menu-button {
+			 display: flex;
+		}
+
+		nav {
+			display: none;
+		}
+	 }
+}
diff --git a/static/js/nav.js b/static/js/nav.js
new file mode 100644
index 0000000..30a7c53
--- /dev/null
+++ b/static/js/nav.js
@@ -0,0 +1,4 @@
+document.getElementById("menu-button").addEventListener("click", function(){
+	this.getElementsByClassName("image")[0].classList.toggle("open");
+	document.getElementById("nav").classList.toggle("visible");
+});
diff --git a/static/menu.svg b/static/menu-closed.svg
similarity index 68%
rename from static/menu.svg
rename to static/menu-closed.svg
index 7f32812..57cb752 100644
--- a/static/menu.svg
+++ b/static/menu-closed.svg
@@ -1 +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
+<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 1zm1.53-5a.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
diff --git a/static/menu-open.svg b/static/menu-open.svg
new file mode 100644
index 0000000..49f1c7d
--- /dev/null
+++ b/static/menu-open.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 style="fill:#fff;fill-opacity:1" d="M2.126 1.069c-.386.002-.716.501-.355.862L5.34 5.5 1.77 9.069c-.471.471.236 1.178.707.707l3.569-3.569 3.569 3.569c.471.471 1.178-.236.707-.707L6.754 5.5l3.569-3.569c.471-.471-.236-1.178-.707-.707L6.047 4.793 2.478 1.224a.488.488 0 0 0-.352-.155z"/></svg>
\ No newline at end of file