Add space between header navigation items using padding

This prevents items appearing next to each other in browsers that do not support column-gap on flex containers and removes the need to use gap when calculating breakpoint widths in component JS.

Author: paulrobertlloyd

packages/components/header/_header-white.scss

@@ -67,7 +67,7 @@
     }
   }
 
-  .nhsuk-header__navigation-list {
+  .nhsuk-navigation {
     border-top-width: 0;
   }
 }
@@ -82,7 +82,7 @@
     }
   }
 
-  .nhsuk-header__navigation-list {
+  .nhsuk-navigation {
     border-top-color: $color_nhsuk-grey-5;
     border-top-width: 1px;
   }

packages/components/header/_header.scss

@@ -222,26 +222,30 @@
 }
 
 .nhsuk-navigation {
-  display: flex;
+  @include govuk-width-container;
 
   @include mq($until: tablet) {
     position: relative;
     z-index: 10;
   }
+
+  @include mq($from: tablet) {
+    border-top: 1px solid $color_transparent_nhsuk-white-20;
+  }
 }
 
 // Visible navigation list
 .nhsuk-header__navigation-list {
-  @include govuk-width-container;
-  column-gap: nhsuk-spacing(4);
   display: flex;
   flex-wrap: wrap;
   list-style: none;
+  margin: 0 (nhsuk-spacing(2) * -1);
   padding: 0;
-  width: 100%;
+  width: calc(100% + nhsuk-spacing(2) + nhsuk-spacing(2));
 
   @include mq($from: tablet) {
-    border-top: 1px solid $color_transparent_nhsuk-white-20;
+    margin: 0 (nhsuk-spacing(3) * -1);
+    width: calc(100% + nhsuk-spacing(3) + nhsuk-spacing(3));
   }
 
   .js-enabled & {
@@ -257,6 +261,11 @@
 
 .nhsuk-header__navigation-item {
   margin-bottom: 0;
+  padding: 0 nhsuk-spacing(2);
+
+  @include mq($from: tablet) {
+    padding: 0 nhsuk-spacing(3);
+  }
 }
 
 // This is a <strong> element used as a fallback mechanism for visually
@@ -328,10 +337,13 @@
   top: 100%;
   left: 0;
 
+  @include mq($until: tablet) {
+    margin: 0 (nhsuk-spacing(3) * -1);
+  }
+
   .nhsuk-header__navigation-link {
     @include govuk-width-container;
     @include nhsuk-link-style-no-visited-state;
-    padding: 12px 0;
 
     // When in expanded menu, a current item link should revert to having a
     // no box-shadow, with a box-shadow added to containing list item instead.
@@ -349,6 +361,7 @@
 
   .nhsuk-header__navigation-item {
     border-top: 1px solid $color_nhsuk-grey-5;
+    padding: 0;
   }
 
   // Current item within expended mobile menu gets blue line on left edge.
@@ -369,6 +382,11 @@
 .nhsuk-mobile-menu-container {
   align-self: center;
   display: none;
+  padding: 0 nhsuk-spacing(2);
+
+  @include mq($from: tablet) {
+    padding: 0 nhsuk-spacing(3);
+  }
 }
 
 .nhsuk-mobile-menu-container--visible {

packages/components/header/header.js

@@ -63,19 +63,13 @@ class Header {
   /**
    * Calculate breakpoints.
    *
-   * Calculate the breakpoints by summing the widths of
-   * each navigation item.
-   *
+   * Calculate breakpoints by summing the width of each navigation item.
    */
   calculateBreakpoints() {
-    // Get the width of the gap between each navigation item
-    const navigationListStyles = window.getComputedStyle(this.navigationList)
-    const gapPixels = navigationListStyles.getPropertyValue('column-gap')
-    const gap = Number(gapPixels.replace('px', ''))
-
     let childrenWidth = 0
     for (let i = 0; i < this.navigationList.children.length; i++) {
-      childrenWidth += this.navigationList.children[i].offsetWidth + gap
+      childrenWidth += this.navigationList.children[i].offsetWidth
+
       this.breakpoints[i] = childrenWidth
     }
   }
@@ -188,9 +182,6 @@ class Header {
       this.mobileMenuContainer.classList.add(
         'nhsuk-mobile-menu-container--visible'
       )
-      if (itemsVisible === 2) {
-        return
-      }
       while (availableSpace < this.breakpoints[itemsVisible - 1]) {
         this.mobileMenu.insertBefore(
           this.navigationList.children[itemsVisible - 2],