From 74169b3ab9c76f5b97658ee55c76a2a92a6736e9 Mon Sep 17 00:00:00 2001
From: Yves Gatesoupe <yves@ygat.es>
Date: Fri, 17 Jul 2020 19:59:41 +0200
Subject: [PATCH] Menu toggle for mobile view

---
 src/_includes/layouts/base.njk              |  2 +-
 src/_includes/partials/components/nav.njk   |  2 +-
 src/_includes/partials/global/site-head.njk |  1 +
 src/js/components/menu-toggle.js            |  4 ++++
 src/scss/components/_nav.scss               | 21 +++++++++++++++++++++
 5 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 src/js/components/menu-toggle.js

diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index 445799a..3b8bc81 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -18,7 +18,7 @@
   {% include "partials/global/site-foot.njk" %}
   {% block foot %}
   {% endblock %}
-  {# <script type="module" src="/js/components/theme-toggle.js" async defer></script> #}
+  <script type="text/javascript" src="/js/components/menu-toggle.js" async defer></script>
   <script>
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', () => {
diff --git a/src/_includes/partials/components/nav.njk b/src/_includes/partials/components/nav.njk
index eb6e5cd..78819c7 100644
--- a/src/_includes/partials/components/nav.njk
+++ b/src/_includes/partials/components/nav.njk
@@ -1,5 +1,5 @@
 {% if navigation.items %}
-  <nav class="nav" aria-label="{{ariaLabel}}">
+  <nav id="menu" class="nav" aria-label="{{ariaLabel}}">
     <ul class="[ nav__list ]">
       {% for item in navigation.items %}
         {% set relAttribute = '' %}
diff --git a/src/_includes/partials/global/site-head.njk b/src/_includes/partials/global/site-head.njk
index dbbeee2..1c80284 100644
--- a/src/_includes/partials/global/site-head.njk
+++ b/src/_includes/partials/global/site-head.njk
@@ -6,6 +6,7 @@
         <span class="visually-hidden">{{ site.name }} - Home</span>
         {% include "../../../images/astrolabe_logo.svg" %}
       </a>
+      <button onclick="menuToggle()">menu</button>
       {% set ariaLabel = 'navigation' %}
       {% include "partials/components/nav.njk" %}
     </div>
diff --git a/src/js/components/menu-toggle.js b/src/js/components/menu-toggle.js
new file mode 100644
index 0000000..df1a2be
--- /dev/null
+++ b/src/js/components/menu-toggle.js
@@ -0,0 +1,4 @@
+function menuToggle() {
+  var menu = document.getElementById('menu');
+  menu.classList.toggle('show');
+}
\ No newline at end of file
diff --git a/src/scss/components/_nav.scss b/src/scss/components/_nav.scss
index 81c0b5e..68f9e11 100644
--- a/src/scss/components/_nav.scss
+++ b/src/scss/components/_nav.scss
@@ -47,3 +47,24 @@
     }
   }
 }
+
+@media (max-width: 767.98px) {
+  .nav {
+    display: none;
+    margin-top: 0;
+
+    &.show {
+      display: block;
+      width: 100%;
+    }
+
+    &__list {
+      flex-direction: column;
+      align-items: flex-end;
+
+      > * + * {
+        margin-left: 0;
+      }
+    }
+  }
+}