From 6c80002e4346b3eb485044bd8ba59a9119c9f6a7 Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Sat, 8 Sep 2018 14:05:38 +0100
Subject: [PATCH] Add some JavaScript to open an close the mobile menu

Fixes #75 but still works in Firefox mobile without JS (and it will in Chrome/Safari too
once :focus-within will be implemented there)
---
 static/css/main.css      | 23 +++++++++++++----------
 static/js/menu.js        | 13 +++++++++++++
 templates/base.html.tera |  1 +
 3 files changed, 27 insertions(+), 10 deletions(-)
 create mode 100644 static/js/menu.js

diff --git a/static/css/main.css b/static/css/main.css
index 5514f8ad..29551e17 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -803,7 +803,7 @@ figcaption {
  		}
  	}
 
- 	header:focus-within #content {
+ 	header:focus-within #content, #content.show {
  		position: fixed;
  		display: flex;
  		flex-direction: column;
@@ -817,7 +817,7 @@ figcaption {
 
  		animation: 0.2s menuOpening;
  	}
- 	header:focus-within #content::before {
+ 	header:focus-within #content::before, #content.show::before {
  		content: "";
  		position: absolute;
  		transform: skewX(-10deg);
@@ -830,11 +830,11 @@ figcaption {
 
  		background: #7765E3;
  	}
- 	header:focus-within #content > nav {
+ 	header:focus-within #content > nav, #content.show > nav {
  		flex-direction: column;
  		align-items: flex-start;
  	}
- 	header:focus-within #content > nav a {
+ 	header:focus-within #content > nav a, #content.show > nav a {
  		display: flex;
  		flex-direction: row;
  		align-items: center;
@@ -844,19 +844,22 @@ figcaption {
  		font-size: 1.4em;
  		font-weight: 300;
  	}
- 	header:focus-within #content > nav a > *:first-child { width: 3rem; }
- 	header:focus-within #content > nav a > img:first-child { height: 3rem; }
- 	header:focus-within #content > nav a > *:last-child { margin-left: 1rem; }
- 	header:focus-within #content > nav a.title {
+    header:focus-within #content > nav a > *:first-child,
+    #content.show > nav a > *:first-child { width: 3rem; }
+    header:focus-within #content > nav a > img:first-child,
+    #content.show > nav a > img:first-child { height: 3rem; }
+    header:focus-within #content > nav a > *:last-child,
+    #content.show > nav a > *:last-child { margin-left: 1rem; }
+ 	header:focus-within #content > nav a.title, #content.show > nav a.title {
  		font-size: 1.8em;
  	}
- 	header:focus-within #content > nav hr {
+ 	header:focus-within #content > nav hr, #content.show > nav hr {
  		display: block;
  		margin: 0;
  		width: 100%;
  		border: solid #F4F4F4 0.1rem;
  	}
- 	header:focus-within #content > nav a .mobile-label {
+ 	header:focus-within #content > nav a .mobile-label, #content.show > nav a .mobile-label {
  		display: initial;
  	}
 
diff --git a/static/js/menu.js b/static/js/menu.js
new file mode 100644
index 00000000..2dee2f39
--- /dev/null
+++ b/static/js/menu.js
@@ -0,0 +1,13 @@
+// It should normally be working fine even without this code
+// But :focus-within is not yet supported by Webkit/Blink
+
+const button = document.getElementById('menu')
+const menu = document.getElementById('content')
+
+button.addEventListener('click', () => {
+  menu.classList.add('show')
+})
+
+menu.addEventListener('click', () => {
+  menu.classList.remove('show')
+})
diff --git a/templates/base.html.tera b/templates/base.html.tera
index 6825e736..db40f8d3 100644
--- a/templates/base.html.tera
+++ b/templates/base.html.tera
@@ -65,5 +65,6 @@
                 {% endif %}
             {% endif %}
         </footer>
+        <script src="/static/js/menu.js"></script>
     </body>
 </html>