Merge pull request #388 from RedHatOfficial/fix/hash-link-overlay

fix: close overlay on mobile nav after hash link click

Author: markcaron

static/js/page.js

@@ -0,0 +1,12 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const mainNavHashLinks = document.querySelectorAll(
+        'rh-navigation-primary-item[href^="#"], rh-navigation-primary-item > a[href^="#"]'
+    );
+
+    // Close dropdowns after clicking an in-page link on mobile viewports
+    for (let hashLink of mainNavHashLinks) {
+        hashLink.addEventListener('click', function() {
+            hashLink.closest('rh-navigation-primary').close();
+        });
+    }
+});

templates/index.html

@@ -116,6 +116,7 @@ <h3 class="header">{{ elem.heading }}</h3>
 
 {% include "partials/_footer.html" %}
 
+<script src="/js/page.js"></script>
 <script src="/js/table-search.js"></script>
 <script src="/js/rht-picture.js"></script>