From 2869dba53c2e74d3bcae1b8135ffaaa81659593d Mon Sep 17 00:00:00 2001
From: hopeful2 <hopeful2@goandmake.app>
Date: Fri, 28 Sep 2018 22:44:26 +1000
Subject: [PATCH 1/2] fix scroll problem of mobile menus on older ios device

---
 layouts/partials/nav-mobile.html |  8 ++++----
 src/js/menutoggle.js             | 19 ++++++++++++++-----
 src/package.json                 |  4 +++-
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/layouts/partials/nav-mobile.html b/layouts/partials/nav-mobile.html
index 00b1a691..a13dd744 100644
--- a/layouts/partials/nav-mobile.html
+++ b/layouts/partials/nav-mobile.html
@@ -1,12 +1,12 @@
-<div  class="globalmenu mobilemenu pb3 dn">
+<div  class="globalmenu mobilemenu pb3 dn overflow-y-scroll pt5" style="max-height: 90vh;">
     {{ partial "nav-links-global-mobile.html" . }}
 </div>
-<div  class="docsmenu mobilemenu pb3 dn">
+<div  class="docsmenu mobilemenu pb3 dn overflow-y-scroll pt5" style="max-height: 90vh;">
     {{ partial "nav-links-docs-mobile.html" . }}
 </div>
 
 <div class="flex dn-l justify-between">
-  <button class="js-toggle flex-auto dib dn-l f6 tc db mt4-ns ph3 pv2 link mr2 white bg-primary-color-dark hover-bg-primary-color ba b--white-40 w-auto" data-target=".globalmenu">Menu</button>
+  <button class="js-toggle mobilemenu-toggler flex-auto dib dn-l f6 tc db mt4-ns ph3 pv2 link mr2 white bg-primary-color-dark hover-bg-primary-color ba b--white-40 w-auto" data-target=".globalmenu">Menu</button>
 
-  <button class="js-toggle flex-auto dib dn-l f6 tc db mt4-ns ph3 pv2 link white bg-primary-color-dark hover-bg-primary-color ba b--white-40 w-auto" data-target=".docsmenu">Docs Menu</button>
+  <button class="js-toggle mobilemenu-toggler flex-auto dib dn-l f6 tc db mt4-ns ph3 pv2 link white bg-primary-color-dark hover-bg-primary-color ba b--white-40 w-auto" data-target=".docsmenu">Docs Menu</button>
 </div>
diff --git a/src/js/menutoggle.js b/src/js/menutoggle.js
index d0e64538..a0ce99de 100644
--- a/src/js/menutoggle.js
+++ b/src/js/menutoggle.js
@@ -1,4 +1,5 @@
 // Grab any element that has the 'js-toggle' class and add an event listner for the toggleClass function
+var bodyScrollLock = require('body-scroll-lock');
 var toggleBtns = document.getElementsByClassName('js-toggle')
   for (var i = 0; i < toggleBtns.length; i++) {
     toggleBtns[i].addEventListener('click', toggleClass, false)
@@ -11,21 +12,29 @@ function toggleClass() {
   var mobileCurrentlyOpen = document.querySelector('.mobilemenu:not(.dn)')
   var desktopCurrentlyOpen = document.querySelector('.desktopmenu:not(.dn)')
   var desktopActive = document.querySelector('.desktopmenu:not(.dn)')
-
+  var mobileWillOpen = false
   // Loop through the targets' divs
   for (var i = 0; i < content.length; i++) {
     var matches = document.querySelectorAll(content[i]);
     //for each, if the div has the 'dn' class (which is "display:none;"), remove it, otherwise, add that class
     [].forEach.call(matches, function(dom) {
-        dom.classList.contains('dn') ?
-        dom.classList.remove('dn') :
-        dom.classList.add('dn');
+        if (dom.classList.contains('dn')) {
+          dom.classList.remove('dn')
+          if (dom.classList.contains("mobilemenu")){
+            // disable body scroll so this menu may scroll on ios.
+            bodyScrollLock.disableBodyScroll(dom)
+            mobileWillOpen = true
+          }
+        } else {
+          dom.classList.add('dn')
+        }
          return false;
        });
         // close the currently open menu items
       if (mobileCurrentlyOpen) mobileCurrentlyOpen.classList.add('dn')
       if (desktopCurrentlyOpen) desktopCurrentlyOpen.classList.add('dn')
       if (desktopActive) desktopActive.classList.remove('db')
-
     }
+    if (!mobileWillOpen) bodyScrollLock.clearAllBodyScrollLocks()
   }
+
diff --git a/src/package.json b/src/package.json
index 04bd261f..5b5dcf81 100644
--- a/src/package.json
+++ b/src/package.json
@@ -32,5 +32,7 @@
     "tachyons": "^4.7.0",
     "webpack": "^2.3.3"
   },
-  "dependencies": {}
+  "dependencies": {
+    "body-scroll-lock": "^2.5.7"
+  }
 }

From 550af449bd17c6a9c033a1738171dbd3c4151159 Mon Sep 17 00:00:00 2001
From: hopeful2 <hopeful2@goandmake.app>
Date: Fri, 28 Sep 2018 23:26:56 +1000
Subject: [PATCH 2/2] added paddig to mobile menu to allow space on ios safari

---
 layouts/partials/site-footer.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/partials/site-footer.html b/layouts/partials/site-footer.html
index 9ae1d215..15a9693c 100644
--- a/layouts/partials/site-footer.html
+++ b/layouts/partials/site-footer.html
@@ -41,7 +41,7 @@
 
     <img src="/images/gopher-side_color.svg" class="absolute-l bottom-0 dn db-l h4 right-0 z-999"/>
 
-    <div class="bg-primary-color-dark bottom-0 left-0 right-0 dn-l fixed pb3 ph3 w-100">
+    <div class="bg-primary-color-dark pt4  bottom-0 left-0 right-0 dn-l fixed pb3 ph3 w-100">
       {{- partial "nav-mobile.html" . -}}
     </div>