Menu + yarn upgrade

package.json

@@ -65,5 +65,6 @@
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10",
     "webpack-merge": "^4.1.4"
-  }
+  },
+  "dependencies": {}
 }

site/layouts/partials/head.html

@@ -9,10 +9,11 @@
 
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <base href="{{ if getenv "CONTEXT" }}{{ cond (eq "production" (getenv "CONTEXT")) (getenv "URL") (getenv "DEPLOY_PRIME_URL") }}{{ else }}{{ $.Site.BaseURL }}{{ end }}">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <base href="{{ if getenv "CONTEXT" }}{{ cond (eq "production" (getenv "CONTEXT")) (getenv "URL") (getenv "DEPLOY_PRIME_URL") }}{{ else }}{{ $.Site.BaseURL }}{{ end }}">
 
 	<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700" rel="stylesheet">
+	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet">
 
 	<!-- Favicons -->
 	<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
@@ -31,4 +32,4 @@
   {{ if .IsHome }}
     <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
   {{ end }}
-</head>
+</head>

site/layouts/partials/nav.html

@@ -1,19 +1,24 @@
 <nav class="flex justify-between items-center center bg-white divider-grey relative">
-
 	<!-- Logo -->
 	<a href="/" class="pa3 db mr4 h-100 w8 flex-none">
 		<img src="/img/logo.png" alt="vvSchijf logo" class="br0 db mb0 w4-m w3"/>
 	</a>
 
-	<!-- Primary Nav -->
-	<ul class="flex b primary">
-		<li><a href="/lidmaatschap" class="pa3 no-underline db">Lidmaatschap</a></li>
-
-		<li><a href="/afgelastingen" class="pa3 no-underline db">Afgelastingen</a></li>
+	<!-- burger menu controlled by invisible checkbox -->
+	<input type="checkbox" id="burger" class="dn">
+	<label for="burger" class="dn-l bg-primary pa2 mv2 white b">
+		<i class="fa fa-bars"></i> Menu
+	</label>
+	<div class="menu db-l dn">
+		<!-- Primary Nav -->
+		<ul class="flex-l b primary">
+			<li><a href="/lidmaatschap" class="pa3 no-underline db">Lidmaatschap</a></li>
 
-		<li><a href="/oud-papier" class="pa3 no-underline db">Oud papier</a></li>
+			<li><a href="/afgelastingen" class="pa3 no-underline db">Afgelastingen</a></li>
 
-		<li><a href="/contact" class="pa3 no-underline db">Contact</a></li>
-	</ul>
+			<li><a href="/oud-papier" class="pa3 no-underline db">Oud papier</a></li>
 
+			<li><a href="/contact" class="pa3 no-underline db">Contact</a></li>
+		</ul>
+	</div>
 </nav>

src/css/imports/_forms.css

@@ -57,7 +57,7 @@ input, textarea {
    line-height: normal;
 }
 
-label
+form label
 {
   font-size: .875rem;
   font-weight: 800;

src/css/imports/_nav.css

@@ -0,0 +1,16 @@
+.menu {
+    transition: max-height 0.5s; /* show/hide menu transition */
+}
+
+/* when checkbox is checked, display menu (sibling element) */
+#burger:checked ~ .menu {
+    display: block;
+}
+
+#burger ~ label {
+    cursor: pointer;
+}
+
+#burger:hover ~ label {
+    background-color: var(--primary-light);
+}

src/css/imports/_variables.css

@@ -1,6 +1,7 @@
 :root {
 	/* Colors */
 	--primary: rgba(255, 0, 0, 1);
+	--primary-light: rgba(255, 90, 90, 1);
 	--vvschijf-yellow: rgba(255, 252, 0, 1);
 	--highlight: rgba(254, 213, 198, 1);
 	--white: rgba(255, 255, 255, 1);

src/css/main.css

@@ -73,6 +73,7 @@
 @import './imports/_buttons';
 @import './imports/_svg';
 @import './imports/_cms';
+@import './imports/_nav';
 
 /* Variables */
 /* Importing here will allow you to override any variables in the modules */

src/index.js

@@ -1,6 +1,3 @@
 // JS Goes here - ES6 supported
 
 import "./css/main.css";
-
-// Say hello
-console.log("🦊 Hello! Edit me in src/index.js");

webpack.common.js

@@ -9,6 +9,7 @@ module.exports = {
   entry: {
     main: path.join(__dirname, "src", "index.js"),
     cms: path.join(__dirname, "src", "js", "cms.js"),
+    app: path.join(__dirname, "src", "js", "app.js"),
   },
 
   output: {