Make menu interactive

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>

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;
+		}
+	 }
+}

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");
+});

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>
+<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>

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>