[GitHub] [camel-website] zregvart commented on a change in pull request #254: [CAMEL-14695] Improve Mobile Main-Menu

[GitBox <gi...@apache.org>]

zregvart commented on a change in pull request #254: [CAMEL-14695] Improve Mobile Main-Menu
URL: https://github.com/apache/camel-website/pull/254#discussion_r397076870
 
 

 ##########
 File path: antora-ui-camel/src/js/04-mobile-navbar.js
 ##########
 @@ -9,4 +9,21 @@ document.addEventListener('DOMContentLoaded', function () {
       document.documentElement.classList.toggle('is-clipped--navbar')
     })
   })
+
+  var menuDropDowns = Array.prototype.slice.call(document.querySelectorAll('.has-dropdown'), 0)
+  var maxMobileWidth = 1023
+  menuDropDowns.forEach(function (el) {
+    el.addEventListener('click', function (e) {
+      var dropDownMenu = el.querySelectorAll('.navbar-dropdown')[0]
+      if (window.innerWidth <= maxMobileWidth) {
+        if (dropDownMenu.style.display === 'block') {
+          dropDownMenu.style.display = 'none'
+        } else {
+          dropDownMenu.style.display = 'block'
+        }
+      } else {
+        dropDownMenu.style.display = 'none'
+      }
+    })
+  })
 
 Review comment:
   This I'm not to keen on. I'd prefer if we just toggeled the class, the Anotra UI already does. Then we would not have to put the width here but we can have the CSS rules depending on the resolution determine the style. i.e. display can be toggled by CSS rules only.

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services