Fix header navigation overflow on desktop

nhsuk · Oct 24, 2024 · a5d5e3c · a5d5e3c
1 parent 841d2de
commit a5d5e3c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 31 deletions.
diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
@@ -412,10 +412,6 @@
     padding-right: 23px;
   }
 
-  @include mq($from: desktop) {
-    display: none;
-  }
-
   .nhsuk-icon__chevron-down {
     right: -3px;
   }

diff --git a/packages/components/header/header.js b/packages/components/header/header.js
@@ -155,7 +155,7 @@ class Header {
    */
 
   updateNavigation() {
-    const availableSpace = this.navigation.offsetWidth
+    const availableSpace = this.navigationList.offsetWidth
     let itemsVisible = this.navigationList.children.length
 
     if (availableSpace < this.breakpoints[itemsVisible - 1]) {

diff --git a/tests/integration/jsdom/header.test.js b/tests/integration/jsdom/header.test.js
@@ -3,21 +3,21 @@ import Header from '../../../packages/components/header/header.js'
 describe('Header class', () => {
   beforeEach(() => {
     document.body.innerHTML = `
-            <div class="nhsuk-navigation"></div>
-            <div class="nhsuk-header__navigation-list">
-                <li style="width: 50px;">Health A-Z</li>
-                <li style="width: 75px;">NHS services</li>
-                <li style="width: 100px;">Live Well</li>
-                <li style="width: 125px;">Mental health</li>
-                <li style="width: 150px;">Care and support</li>
-                <li style="width: 275px;">Pregnancy</li>
-                <li style="width: 200px;">Home</li>
-                <li style="width: 225px;">More</li>
-            </div>
-            <div class="nhsuk-header__menu-toggle"></div>
-            <div class="nhsuk-mobile-menu-container"></div> 
-            <div class="nhsuk-header__menu-toggle"></div>
-            `
+      <div class="nhsuk-navigation"></div>
+      <div class="nhsuk-header__navigation-list">
+          <li style="width: 50px;">Health A-Z</li>
+          <li style="width: 75px;">NHS services</li>
+          <li style="width: 100px;">Live Well</li>
+          <li style="width: 125px;">Mental health</li>
+          <li style="width: 150px;">Care and support</li>
+          <li style="width: 275px;">Pregnancy</li>
+          <li style="width: 200px;">Home</li>
+          <li style="width: 225px;">More</li>
+      </div>
+      <div class="nhsuk-header__menu-toggle"></div>
+      <div class="nhsuk-mobile-menu-container"></div>
+      <div class="nhsuk-header__menu-toggle"></div>
+      `
   })
 
   it('Should create navigation elements in the DOM', async () => {
@@ -50,7 +50,7 @@ describe('Header class', () => {
   })
 
   it('Should close menu when escape key is pressed', async () => {
-    //define a event for the escape key
+    // Define a event for the escape key
     const escapeKeyEvent = new KeyboardEvent('keydown', {
       key: 'Escape',
       code: 'Escape',
@@ -62,18 +62,18 @@ describe('Header class', () => {
 
     await Header()
 
-    //Expect the menu to be hidden initially
+    // Expect the menu to be hidden initially
     expect(
       document.querySelector('.nhsuk-header__drop-down').classList.contains('nhsuk-header__drop-down--hidden')
     ).toBe(true)
 
-    //Toogle the menu - open it
+    // Toggle the menu - open it
     toggleButton.click()
     expect(
       document.querySelector('.nhsuk-header__drop-down').classList.contains('nhsuk-header__drop-down--hidden')
     ).toBe(false)
 
-    //Press the escape key to close it
+    // Press the escape key to close it
     document.dispatchEvent(escapeKeyEvent)
     expect(
       document.querySelector('.nhsuk-header__drop-down').classList.contains('nhsuk-header__drop-down--hidden')
@@ -88,16 +88,16 @@ describe('Header class', () => {
   })
 
   it('Should setup the Mobile Menu List during initialization', async () => {
-    //Initially there won't be any ul elements inside the container- it gets added in the setupMobileMenu method
+    // Initially there won't be any ul elements inside the container- it gets added in the setupMobileMenu method
     let mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul')
 
-    //So we expect that to be null until it gets created
+    // So we expect that to be null until it gets created
     expect(mobileMenuList).toBe(null)
 
     // Call the Header initialization function
     await Header()
 
-    //We update the variable to hold the ul element from the container that has been created
+    // We update the variable to hold the ul element from the container that has been created
     mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul')
 
     expect(mobileMenuList).not.toBeNull()
@@ -108,15 +108,14 @@ describe('Header class', () => {
   it('Should not update navigation when the available space is enough for all elements', async () => {
     const mobileMenuToggleButton = document.querySelector('.nhsuk-header__menu-toggle')
     const mobileMenuContainer = document.querySelector('.nhsuk-mobile-menu-container')
-    const navigationElement = document.querySelector('.nhsuk-navigation')
     const navigationList = document.querySelector('.nhsuk-header__navigation-list')
     let mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul')
 
     // Spy on offsetWidth property for navigation element
     const navigationOffsetWidthSpy = jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get')
     // Mock offsetWidth for navigation element
     navigationOffsetWidthSpy.mockImplementation(function () {
-      if (this === navigationElement) {
+      if (this === navigationList) {
         return 1000 // Mock navigation element offsetWidth
       }
       return 50 // Mock children offsetWidth
@@ -140,15 +139,14 @@ describe('Header class', () => {
   it('Should update navigation when the available space is not enough for all elements', async () => {
     const mobileMenuToggleButton = document.querySelector('.nhsuk-header__menu-toggle')
     const mobileMenuContainer = document.querySelector('.nhsuk-mobile-menu-container')
-    const navigationElement = document.querySelector('.nhsuk-navigation')
     const navigationList = document.querySelector('.nhsuk-header__navigation-list')
     let mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul')
 
     // Spy on offsetWidth property for navigation element
     const navigationOffsetWidthSpy = jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get')
     // Mock offsetWidth for navigation element
     navigationOffsetWidthSpy.mockImplementation(function () {
-      if (this === navigationElement) {
+      if (this === navigationList) {
         return 700 // Mock navigation element offsetWidth
       }
       return 100 // Mock children offsetWidth