Merge pull request #15 from Prakash1185/fix/mobile-topbar-click

Fix topbar menu click behavior on smaller screens

Author: Harbs

.eleventy.js

@@ -30,6 +30,7 @@ module.exports = /** @param eleventyConfig {UserConfig} */ function (eleventyCon
   // be sure to add the directory to .eleventyignore
   eleventyConfig.addPassthroughCopy("img");
   eleventyConfig.addPassthroughCopy("fnt");
+  eleventyConfig.addPassthroughCopy("js");
   eleventyConfig.addPassthroughCopy(".htaccess");
   eleventyConfig.addPassthroughCopy("robots.txt");
   eleventyConfig.addPassthroughCopy("asdoc");

_includes/basic.html

@@ -42,6 +42,7 @@
     </div>
   </div>
   {% include "footer.html" %}
+  <script src="/js/topbar.js"></script>
 </body>
 
 </html>

_includes/blog-post.html

@@ -44,6 +44,7 @@
     </div>
   </div>
   {% include "footer.html" %}
+  <script src="/js/topbar.js"></script>
 </body>
 
 </html>

_includes/marketing.html

@@ -40,6 +40,7 @@
     {{ content }}
   </div>
   {% include "footer.html" %}
+  <script src="/js/topbar.js"></script>
 </body>
 
 </html>

_includes/sass/royale-theme-topbar.sass

@@ -127,11 +127,20 @@
   .topMenu > li > a:hover
     background-color: #e7e7e7
 
-  .topbar-right:hover .topMenu
-    display: flex
-    z-index: 1000
 
 @media (max-width: 599px)
   .topbar-left
     div
-      width: 140px
+      width: 140px
+
+@media screen and (max-width: 840px)
+  .topMenu
+    display: none
+    flex-direction: column
+    position: absolute
+    right: 10px
+    top: 70px
+    z-index: 1000
+
+  .topMenu.is-open
+    display: flex

js/topbar.js

@@ -0,0 +1,20 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const btn = document.querySelector(".topMenu-dropbtn");
+  const menu = document.querySelector(".topMenu");
+
+  if (!btn || !menu) return;
+
+  btn.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    menu.classList.toggle("is-open");
+  });
+
+  menu.addEventListener("click", (e) => {
+    e.stopPropagation();
+  });
+
+  document.addEventListener("click", () => {
+    menu.classList.remove("is-open");
+  });
+});