attach click event to links in nav bar so that it closes the nav bar …

…& add ids to the navbar links

gov_uk_dashboards/assets/mobile-nav.js

@@ -6,7 +6,7 @@ var mobileNav = null;
  * @type {boolean}
  */
 var isOpen = false;
-
+ 
 if (typeof attachEventToDash !== 'undefined') {
     attachEventToDash('mobile-menu-btn', 'click', function () {
         if (mobileNav === null) {
@@ -18,6 +18,21 @@ if (typeof attachEventToDash !== 'undefined') {
         mobileNav.style.display = isOpen ? 'none' : 'inline-block';
         isOpen = !isOpen;
     }, false)
+
+// attach click events that close the menu to links in the nav menu 
+var numberOfLinks = 8; // ideally get dynamically but document.querySelectorAll and trying to match id before attaching event to Dash didn't work.. 
+for (var i = 0; i < numberOfLinks; i++) {
+    var linkId = 'nav-bar-link-' + i + '-mobile';
+    attachEventToDash(linkId, 'click', function () {
+        if (mobileNav === null) {
+            mobileNav = document.getElementById('nav-section')
+            if (!mobileNav) {
+                return;
+            }
+        }
+        mobileNav.style.display = 'none';
+        isOpen = false;
+        }, false);
 }
 
 /**
@@ -46,4 +61,4 @@ window.addEventListener(
             }
         }
     }, 150)
-);
+);}

gov_uk_dashboards/components/plotly/side_navbar.py

@@ -20,15 +20,16 @@ def side_navbar(
     )
 
 
-def side_navbar_link(text, href):
+def side_navbar_link(text, href, link_id):
     """A link to another dashboard"""
     return html.Li(
         dcc.Link(text, href=href, className="govuk-link govuk-link--no-visited-state"),
         className="moj-side-navigation__item govuk-!-margin-bottom-1",
+        id=link_id,
     )
 
 
-def side_navbar_link_active(text, href):
+def side_navbar_link_active(text, href, link_id):
     """
     A link to another dashboard that appears highlighted, suggesting to the user that they are
     already viewing the linked dashboard.
@@ -39,4 +40,5 @@ def side_navbar_link_active(text, href):
             "moj-side-navigation__item moj-side-navigation__item--active "
             "govuk-!-margin-bottom-1"
         ),
+        id=link_id,
     )

setup.py

@@ -10,7 +10,7 @@
     author="Department for Levelling Up, Housing and Communities",
     description="Provides access to functionality common to creating a data dashboard.",
     name="gov_uk_dashboards",
-    version="9.13.4",
+    version="9.14.0",
     long_description=long_description,
     long_description_content_type="text/markdown",
     packages=find_packages(),