add overview links, active style in subnav

alphagov · Dec 18, 2024 · 70a62a4 · 70a62a4
1 parent a7fb2d3
commit 70a62a4
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 26 deletions.
diff --git a/lib/navigation.js b/lib/navigation.js
@@ -47,7 +47,7 @@ module.exports = (config) => (files, metalsmith, done) => {
 
       // Add subitem to navigation
       item.items.push({
-        href: `${dirname(itemPath)}`,
+        href: `/${dirname(itemPath)}`,
         text: frontmatter.title,
         order: frontmatter.order,
         theme: frontmatter.theme,

diff --git a/src/javascripts/components/mobile-navigation.mjs b/src/javascripts/components/mobile-navigation.mjs
@@ -46,14 +46,24 @@ class MobileNavigation extends Component {
       link.insertAdjacentElement('afterend', button)
     })
 
+    const currentLink = Array.from(
+      this.$root.querySelectorAll(
+        `.app-navigation__subnav-item a[href="${window.location.pathname.slice(0, -1)}"]`
+      )
+    ).pop()
+
+    if (currentLink) {
+      currentLink.classList.add('app-mobile-navigation__link--active')
+    }
+
     // A global const for storing a matchMedia instance which we'll use to detect when a screen size change happens
     // Set the matchMedia to the govuk-frontend tablet breakpoint
 
-    const x = getComputedStyle(document.documentElement).getPropertyValue(
-      '--govuk-frontend-breakpoint-tablet'
-    )
+    const breakPoint = getComputedStyle(
+      document.documentElement
+    ).getPropertyValue('--govuk-frontend-breakpoint-tablet')
 
-    this.mql = window.matchMedia(`(min-width: ${x})`)
+    this.mql = window.matchMedia(`(min-width: ${breakPoint})`)
 
     // MediaQueryList.addEventListener isn't supported by Safari < 14 so we need
     // to be able to fall back to the deprecated MediaQueryList.addListener
@@ -76,11 +86,10 @@ class MobileNavigation extends Component {
       'click',
       (e) => {
         if (e.target.tagName === 'BUTTON') {
-          if (e.target.getAttribute('aria-expanded') === 'true') {
-            e.target.setAttribute('aria-expanded', 'false')
-          } else {
-            e.target.setAttribute('aria-expanded', 'true')
-          }
+          e.target.setAttribute(
+            'aria-expanded',
+            !(e.target.getAttribute('aria-expanded') === 'true')
+          )
         }
       },
       { bubbles: true }

diff --git a/src/stylesheets/components/_mobile-navigation.scss b/src/stylesheets/components/_mobile-navigation.scss
@@ -1,3 +1,15 @@
+.app-mobile-navigation .govuk-service-navigation__item--active {
+  @include govuk-media-query($until: tablet) {
+    border-color: transparent;
+  }
+}
+
+.app-mobile-navigation__link--active {
+  @include govuk-media-query($until: tablet) {
+    border-left: 5px solid rgb(26.1, 100.8, 165.6);
+  }
+}
+
 .app-mobile-navigation__toggle-button {
   @include govuk-media-query($from: tablet) {
     display: none;

diff --git a/views/partials/_navigation.njk b/views/partials/_navigation.njk
@@ -4,29 +4,30 @@
 {% set navigationItems = [] %}
 
 {% for item in navigation %}
-  {% set navItem = {} %}
+  {% set subNavItems = [{ 
+    href: item.href,
+    text: item.text + " overview",
+    active: permalink and permalink.startsWith(item.href.slice(1)),
+    current: permalink === item.href
+  }] %}  
 
   {% if item.items %}
-    {% set subNavItemHtml = mobileNavigation({ items: item.items }) %}
-    {% set navItem = {
-      href: item.href,
-      html: item.text + '<template class="app-mobile-navigation__template">' + subNavItemHtml + '</template>',
-      active: permalink and permalink.startsWith(item.url),
-      current: permalink === item.url    
-    } %}    
-  {% else %}
-    {% set navItem = {
-      href: item.href,
-      html: item.text,
-      active: permalink and permalink.startsWith(item.url),
-      current: permalink === item.url    
-    } %}
+    {% set subNavItems = subNavItems.concat(item.items) %}
   {% endif %}
 
+  {% set subNavItemHtml = mobileNavigation({ items: subNavItems.concat(item.items) }) %}
+
+  {% set navItem = {
+    href: item.href,
+    html: item.text + '<template class="app-mobile-navigation__template">' + subNavItemHtml + '</template>',
+    active: permalink and permalink.startsWith(item.href.slice(1)),
+    current: permalink === item.href
+  } %}  
+
   {% set navigationItems = navigationItems.concat(navItem) %}
 {% endfor %}
 
-<div data-module="app-mobile-navigation">
+<div class="app-mobile-navigation" data-module="app-mobile-navigation">
   {{ govukServiceNavigation({
     navigation: navigationItems
   }) }}