diff --git a/gov_uk_dashboards/assets/mobile-nav.js b/gov_uk_dashboards/assets/mobile-nav.js index 972463d..e6ecf0b 100644 --- a/gov_uk_dashboards/assets/mobile-nav.js +++ b/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) -); \ No newline at end of file +);} \ No newline at end of file diff --git a/gov_uk_dashboards/components/plotly/side_navbar.py b/gov_uk_dashboards/components/plotly/side_navbar.py index 66aa66e..5dc2ad2 100644 --- a/gov_uk_dashboards/components/plotly/side_navbar.py +++ b/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, ) diff --git a/setup.py b/setup.py index ed45ffb..748c165 100644 --- a/setup.py +++ b/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(),